Autocompilazione Form con ricerca
Autore: Marco RicchezzaCiao A tutti grazie a Voi che mi avete aiutato abbiamo creato lo script sotto mi chiedevo se fosse possibile non avere la Lista con la freccia ma vorrei solamte che appena scrivo anche solo una parte mi faccia vedere i risultati e appena scelto clicco invio e mi va nella pagina dove ho scelto il valore.
La seconda parte fuziona ma la prima al momento mi da la lista con l'iconcia della freccia verso il basso si può togliere ?
<main id="imContent">
<a id="imGoToCont"></a>
<div id="imPageRow_1" class="imPageRow">
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;"><div id="imPageRowGraphics_1"></div></div>
</div>
<div id="imCell_30" class="" data-responsive-sequence-number="1"> <div id="imCellStyleGraphics_30"></div><div id="imCellStyleBorders_30"></div><div id="imHTMLObject_3_30" class="imHTMLObject" style="text-align: center; width: 100%; overflow: hidden;"><div style="display:block;position:relative;float:left;background:#78ABCE;width:29%;height:40px;padding:5px 5px;box-sizing:border-box;">
<div style="display:block;position:relative;float:left;background:#E7EFF5;width:100%;height:29px;box-sizing:border-box;">
<form id="imObjectForm_3" action="https://www.adgardensrl.it/avvio-ricerca.php" method="post">
<input type="text" class="" id="imObjectFormProdotto" list="lista_prodotti" name="prodotto" autocomplete="on" placeholder="(Prodotto o Categoria)" style="display:block;position:relative;float:left;background:#E7EFF5;width:100%;height:29px; box-sizing:border-box; border-style:none; font-family:Tahoma, sans serif; font-size:11pt; font-weight:normal; font-style:normal;">
<datalist id="lista_prodotti" style="border:none; border-style:none; height:100%;">
<option>Alba Plenissima</option><option>Almost Black</option><option>American Star</option>
<option>Attraction</option><option>Aurora</option><option>Barbara Dobbins</option>
<option>Bateau</option><option>Black Princess</option><option>Blushing Bride</option>
<option>Bory De Saint Vincent</option><option>Caroliniana Nivea</option>
<option>Charles De Meurville</option>
<option>Chrysantha</option><option>Colonel A.J. Welch</option><option>Colorado</option>
<option>Conqueror</option><option>Detective Erika</option><option>Ellisiana</option>
<option>Ernst Epple Senior</option><option>Escarboucle</option><option>Fay McDonald</option>
<option>Froebeli</option><option>Gloire Du Temple Sur Lot</option><option>Gonnere</option>
<option>Jakkapan</option><option>Jakkaphong</option><option>James Brydon</option>
<option>Joey Tomocik</option><option>Lalek</option><option>Larroque</option>
<option>Laydekeri Fulgens</option><option>Laydekeri Liliacea</option><option>Lemon Chiffon</option>
<option>Lily Pons</option><option>Little Sue</option><option>Madame Wilfron Gonnere</option>
<option>Mahasombut</option><option>Manee Red</option><option>Mangkala Ubol</option>
<option>Martha</option><option>Maurice Laydeker</option><option>Mayla</option>
<option>Mexicana</option><option>Miss Siam</option><option>Moorei</option>
<option>Nigel</option><option>Nuphar Advena</option><option>Odorata Luciana</option>
<option>Painted Lady</option><option>Paranee</option><option>Peace Lily</option>
<option>Perry's Baby Red</option><option>Perry's Cactus Pink</option><option>Perry's Double White</option>
<option>Perry's Fire Opal</option><option>Perry's Magnificent</option>
<option>Perry's Orange Sunset</option><option>Perry's Red Blaze</option>
<option>Perry's Red Star</option><option>Perry's Viviparous Pink</option>
<option>Peter Slocum</option><option>Pink Dawn</option>
<option>Pinwaree</option><option>Prakaysad</option><option>Princess Elizabeth</option>
<option>Purple Fantasy</option><option>Pygmaea Alba</option><option>Pygmaea Helvola</option>
<option>Rose Arey</option><option>Siam Jasmine</option>
<option>Sioux</option><option>Sunny Pink</option>
<option>Tan Khwan</option><option>Thongsup</option>
<option>Wanvisa</option><option>Zores</option>
</datalist>
</div>
</div>
<div style="display:block;position:relative;float:left;background:#78ABCE;width:13%;height:40px;padding:5px 5px;box-sizing:border-box;">
<div style="display:block;position:relative;float:left;background:#E7EFF5;border-radius:3px;width:100%;height:29px;box-sizing:border-box;">
<input type="image" src="https://www.adgardensrl.it/marco/cerca/images/Icona-Lente.png" name="clicca" alt="Immagine di una icona con disegnato una lente di ingrandimento" style="padding:2px 0px;">
</div>
</form>
</div>
</div>
</div></div><div id="imPageRow_2" class="imPageRow">
</div>
<div id="imPageRow_3" class="imPageRow">
</div>
</main></div></div><div id="imCell_67" class="" data-responsive-sequence-number="2"> <div id="imCellStyleGraphics_67"></div><div id="imCellStyleBorders_67"></div><div id="imTextObject_67">
Ciao Marco, intendi come nel campo ricerca che hai messo nel tuo sito dell'altro post ?
https://helpcenter.websitex5.com/it/post/213035
Autore
Si grazie magari se fosse possibile
Ciao Marco, purtroppo non sono sufficientemente esperto per dirti come togliere il simbolo della freccia nel campo datalist... non resta che attendere una risposta da user più esperti di me...
Autore
Roberto tu sei stato favoloso , grazie ancora per l'aiuto
Autore
Ma se uso invece :
<!doctype html><htmllang="en"><head><metacharset="utf-8"><title>autocomplete demo</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-1.12.4.js"></script><scriptsrc="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script></head><body><labelfor="autocomplete">Select a programming language: </label><inputid="autocomplete"><script>$( "#autocomplete" ).autocomplete({ source: [ "Alba Plenissima", "Mahasombut", "Perry's Baby Red", "Attraction", "Bateau" ]});</script></body></html>
cosa manca per dirgli che se scelgo Attraction deve andare sulla pagina ttps://www.adgardensrl.it/attraction.php
mentre se selgo Bateau deve andare sul link http://www.adgardensrl.it/bateau-.php
e cosi via ... ?
Autore
Sono riuscito a risolvere facendo cosi :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
var availableTags = [{label:"Alba Plenissima", the_link:"https://www.adgardensrl.it/alba-plenissima-1.php"}
,{label:"Almost Black", the_link:"https://www.adgardensrl.it/almost-black.php"}
,{label:"American Star", the_link:"https://www.adgardensrl.it/american-star.php"}
,{label:"Arc En Ciel", the_link:"https://www.adgardensrl.it/arc-en-ciel.php"}
,{label:"Attraction", the_link:"https://www.adgardensrl.it/attraction.php"}
];
$( "#tags" ).autocomplete({
source: availableTags,
select:function(e,ui) {
console.log(ui); // When you click (select) the ui object is returned , as well as the event
// You can get at the returned results ( the object via . (dot) notation )
// location.href = ui.item.the_link;
//console.log(ui.item.the_link);
location.href = ui.item.the_link;
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Ninfea: </label>
<input id="tags">
</div>
</body>
</html>
...grazie per l'nfo...