Mein Problem: Ich bin auf der Suche nach einem Eingabefeld, das Vorschläge automatisch vervollständigt, wenn ich sie eintippe. Bei der Eingabe der ersten Auswahl (dies ist bereits in der Plug-in) durch Klicken oder Drücken der Eingabetaste, möchte ich die Auswahl, die an eine URL gebunden ist, an diese neue URL weiterleiten.Javascript/Jquery zu URL von und <datalist> gehen

Grund Beispiel für Plug-in

hier, um diese direkt von der Website des Entwicklers und ein Beispiel dafür, was verwendet wird.

<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>

Der Grund Änderungen

Was ich es für navigieren ist eine Liste der US-Staaten verwenden würde. Die Idee hier wäre, ein neues (oder aktuelles Fenster) auf die URL umzuleiten, die dem Status zugeordnet ist. Alabama gehen zu http://www.alabama.gov, und so weiter.

<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:

Nach vielen Suchanfragen durchlaufen und zu sehen, dass Jquery oder Javascript hierfür erforderlich ist, habe ich versucht, durch einige Lösungen zu gehen, kann aber durchaus nicht scheinen, damit es funktioniert . Es ist vielleicht nicht einmal möglich. Ich wollte nicht zu viele Beispiele von dem geben, was ich versucht habe, und den Post darüber verstopfen, also habe ich versucht, es in seiner grundlegendsten Form mit der Idee im Hinterkopf zu lassen.

Soweit ich weiß, müsste ich eine URL an einen Wert mit dem Optionstag binden, richtig? Ich habe Beispiele in meinem Code, aber ich habe es wieder einmal in seiner einfachsten Form für den Betrachter getan.

Quelle

2017-09-12 H. Klamp

Sind Sie gerade fragen, wie eine 'value' zu einem hinzufügen 'option' Element? Wäre es nicht so etwas ?: < 'Oder vielleicht nur ein Daten- * Attribut? Zum Beispiel: '' Es ist mir nicht wirklich klar, wo genau du feststeckst. – David

Hallo David, Entschuldigung für den Mangel an Klarheit. Ich verstehe das Hinzufügen eines Werts, aber ich müsste das Skript dazu bringen, diesen Wert zu verwenden, um auf die dort vorhandene URL umzuleiten. Es sieht so aus, als hätte jemand anderes diese Antwort/Anregung gegeben und ich versuche gerade, es zur Arbeit zu bringen. Im Wesentlichen, haben Sie eine URL auf dem

Sie die URL in einer value Eigenschaft speichern könnten, und dann, dass ausgelesen, wenn die Eingabe erfolgt:

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>

Quelle

2017-09-12 14:31:57 trincot

Hallo Trincot. Ja, das ist was Ich stellte mir vor, seltsamerweise, wenn ich mir den Code ausleihe, kann ich nicht den Eindruck erwecken, dass er den Redirect abfeuert. Ich entfernte das, was ich glaube, macht die 'window.location.href = url;' einen "Kommentar" in der Es scheint so zu sein, dass es im Code-Snippet funktioniert, aber wenn ich es in meiner gehosteten Umgebung starte, scheint es nicht zu feuern. Ich werde weiter damit spielen. Außerdem wäre es möglich, es so zu bekommen die URL tritt nicht in das Feld ein, sondern behält den normalen Titel zwischen den Tags. Vielen Dank für Ihre Hilfe! –

Tatsächlich ist 'window.location.href' die [Standardmethode] (https://stackoverflow.com/ Fragen/1226714/how-to-Get-Browser-zu-URL-in-Javascript zu navigieren, um umzuleiten.Wenn das nicht funktioniert, haben Sie möglicherweise andere Code, der diese Operation irgendwie entgegenwirkt. (2) Ich habe den Code aktualisiert, damit die URL nicht in das Textfeld eingeht. – trincot

Gibt es eine Chance, dass ich dies nicht eine ordnungsgemäße Dokument laden oder Fenster-Onload-Funktion geben? Ich mache eine grundlegende einfache Seite, die einfach den gleichen Code verwendet, wie zur Verfügung gestellt, während das Java in ein '

Es scheint mir, dass Sie bereits den Großteil der Arbeit getan haben, müssen nur eine kleine Javascript/Jquery-Funktion schreiben, um die Umleitung zu tun.

Zum Beispiel (auf blure Ereignis):

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>

Quelle

2017-09-12 12:56:24

Innerhalb der API für Awesomplete, werden Sie die Ereignisliste finden. Die Ereignisse awesomplete-selectcomplete lösen ein Ereignis aus, wenn der Benutzer seine Option ausgewählt hat. Das ist, was Sie wollen.

Sie möchten den Benutzer mit der Methode window.location.href umleiten.

Siehe Code unten:

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>

Wie Sie sehen können, ich weiß nicht, die URLs für eine der Websites der Regierung, aber Sie können die URL aufbauen, wie Sie benötigen zu.

Quelle

2017-09-12 13:01:09

Ich bin wieder zu spät :(gerade entdeckt es hier https://github.com/LeaVerou/awesomplete/blob/gh-pages/awesomplete.min.js – Niladri

Verwandte Themen