Mon problème:. Je cherche à faire une boîte d'entrée qui autocompletes suggestions que je les saisis Sur les taper en prenant la première sélection (ce qui est déjà compris dans le plug-in) soit en cliquant sur ou en appuyant sur Entrée, je voudrais soumettre cette sélection qui est liée à une URL pour rediriger vers cette nouvelle URL.Javascript/Jquery pour aller à l'URL de <input> et <datalist>

de base Exemple de plug-in

Ce ici est directement sur le site du développeur et un exemple de ce qui est utilisé.

<input class="form-control awesomplete" list="mylist" /> 
 
<datalist id="mylist"> 
 
\t <option>Ada</option> 
 
\t <option>Java</option> 
 
\t <option>JavaScript</option> 
 
\t <option>Brainfuck</option> 
 
\t <option>LOLCODE</option> 
 
\t <option>Node.js</option> 
 
\t <option>Ruby on Rails</option> 
 
</datalist>

La base Changements

Ce que je voudrais l'utiliser pour naviguer est une liste d'états américains. L'idée ici serait de rediriger une nouvelle fenêtre (ou une fenêtre courante) vers l'URL associée à l'état. Alabama aller à http://www.alabama.gov, et ainsi de suite.

<input class="form-control awesomplete" list="states" /> 
 
<datalist id="states"> 
 
\t <option>Alabama</option> 
 
\t <option>Alaska</option> 
 
\t <option>Arizona</option> 
 
\t <option>Arkansas</option> 
 
\t <option>California</option> 
 
\t <option>Colorado</option> 
 
\t <option>Connecticut</option> 
 
</datalist>

I stuck here:

Après avoir traversé de nombreuses recherches et de voir que Jquery ou Javascript est nécessaire pour cela, je l'ai essayé de passer par des solutions, mais ne peut pas sembler tout à fait pour le faire fonctionner . Cela pourrait même ne pas être possible. Je ne voulais pas donner trop d'exemples de ce que j'ai essayé et encombrer le poste, alors j'ai essayé de le laisser dans sa forme la plus basique avec l'idée en tête. Pour autant que je sache, il faudrait que je lie une URL à une valeur avec la balise d'option, n'est-ce pas? J'en ai des exemples dans mon code, mais encore une fois, j'ai essayé de laisser cela sous sa forme la plus basique pour le spectateur.

Source

2017-09-12 H. Klamp

Êtes-vous simplement demander comment ajouter un 'value' à un élément 'option'? Ne serait-ce pas quelque chose comme ça?: '' Ou peut-être juste un attribut data- *? Par exemple: '' Ce n'est pas vraiment clair pour moi où précisément vous êtes coincé. – David

Bonjour David, désolé pour le manque de clarté. Je comprends l'ajout d'une valeur, mais j'ai besoin que le script utilise cette valeur pour rediriger vers l'URL qui s'y trouve. Il semble que quelqu'un d'autre ait fourni cette réponse/suggestion et j'essaie actuellement de le faire fonctionner. Essentiellement, ayez une URL sur la balise

Vous pouvez stocker l'URL dans une propriété value, puis lu que lorsque l'entrée est faite:

var aweInput = new Awesomplete(myinput); 
 
myinput.addEventListener('awesomplete-select', function(e) { 
 
    var url = e.text.value; // The value associated with the selection 
 
    console.log('navigating to: ' + url) 
 
    // Some optional actions: 
 
    e.preventDefault(); // Prevent the URL from appearing in the input box 
 
    e.target.value = e.text.label; // Set the value to the selected label 
 
    aweInput.close(); // close the drop-down 
 
    //window.location.href = url; 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.2/awesomplete.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.2/awesomplete.css" /> 
 
<input id="myinput" list="states" /> 
 
<datalist id="states"> 
 
\t <option value="http://www.alabama.gov/">Alabama</option> 
 
\t <option value="http://alaska.gov/">Alaska</option> 
 
\t <option value="https://az.gov/">Arizona</option> 
 
\t <option value="http://www.arkansas.gov/">Arkansas</option> 
 
\t <option value="http://www.ca.gov/">California</option> 
 
\t <option value="https://www.colorado.gov/">Colorado</option> 
 
\t <option value="http://portal.ct.gov/">Connecticut</option> 
 
</datalist>

Source

2017-09-12 14:31:57 trincot

Bonjour Trincot Oui, c'est ce que J'imaginais ... Bizarrement, quand j'emprunte le code, je n'arrive pas à le faire déclencher la redirection. Il semble fonctionner dans l'extrait de code, mais lorsque je le lance sur mon environnement hébergé, il ne semble pas se déclencher, je vais continuer à jouer avec ça. l'URL n'entre pas dans la boîte, elle garde plutôt le titre normal entre les tags? Merci pour votre aide! –

En effet 'window.location.href' est le [moyen standard] (https://stackoverflow.com/ questions/1226714/how-to-get-browser-to-navigate-to-url-in-javascript) pour rediriger .Si cela ne fonctionne pas, vous pouvez avoir d'autres code qui en quelque sorte contre-agit cette opération. (2) J'ai mis à jour le code afin que l'URL n'entre pas dans la zone de texte. – trincot

Y at-il une chance que je ne donne pas une fonction de chargement de document ou de chargement de fenêtre appropriée? Je fais une page simple de base qui utilise simplement le même code que celui fourni en plaçant le java dans une balise '

Il me semble que vous avez déjà fait la plupart du travail, juste besoin d'écrire une petite fonction javascript/jquery pour faire la redirection.

Par exemple (sur l'événement blure):

var placeHolder = '[countryCode]'; 
 
var urlTemplate = 'https://www.' + placeHolder + '.gov'; 
 
$('.awesomplete').on('blur', function(e){ 
 
    var value = e.target.value; 
 
    var nextUrl = urlTemplate.replace(placeHolder,value); 
 
    console.log('redirecting to - ' + nextUrl); 
 
    //window.location.href = nextUrl; // uncomment for redirecting 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="form-control awesomplete" list="states" /> 
 
<datalist id="states"> 
 
\t <option>Alabama</option> 
 
\t <option>Alaska</option> 
 
\t <option>Arizona</option> 
 
\t <option>Arkansas</option> 
 
\t <option>California</option> 
 
\t <option>Colorado</option> 
 
\t <option>Connecticut</option> 
 
</datalist>

Source

2017-09-12 12:56:24

Au sein de l'API pour Awesomplete, vous trouverez la liste des événements. Une fois des événements, awesomplete-selectcomplete, déclenche un événement lorsque l'utilisateur a sélectionné son option. C'est ce que vous voulez accrocher.

Vous souhaiterez rediriger l'utilisateur avec la méthode window.location.href.

code Voir ci-dessous:

var input = document.getElementById('myinput'); 
 

 
new Awesomplete(input); 
 
input.addEventListener('awesomplete-selectcomplete', (e) => { 
 
    // This callback will be called whenever a selection is made. 
 
    console.log(e.text.label) // Grabs the text of the selection 
 
    console.log('navigating to: ' + "www." + e.text.label + ".gov") 
 
    //window.location.href = "www." + e.text.label + ".gov"; 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.2/awesomplete.js"></script> 
 
<input id="myinput" list="states" /> 
 
<datalist id="states"> 
 
\t <option>Alabama</option> 
 
\t <option>Alaska</option> 
 
\t <option>Arizona</option> 
 
\t <option>Arkansas</option> 
 
\t <option>California</option> 
 
\t <option>Colorado</option> 
 
\t <option>Connecticut</option> 
 
</datalist>

Comme vous pouvez le voir, je ne connais pas les URL pour l'un des sites Web du gouvernement, mais vous pouvez construire l'URL que vous avez besoin à.

Source

2017-09-12 13:01:09

je suis en retard à nouveau :(juste découvert ici https://github.com/LeaVerou/awesomplete/blob/gh-pages/awesomplete.min.js – Niladri

Javascript/Jquery pour aller à l'URL de <input> et <datalist>

de base Exemple de plug-in

La base Changements

Répondre

Questions connexes