Autocomplete mit jQuery Callback (Label/Wert-Paar)

Ich versuche, Autocomplete jQuery zu implementieren, aber verstehe nicht die autocomplete Funktion, die jQuery UI bietet.Autocomplete mit jQuery Callback (Label/Wert-Paar)

Sie verwendet eine Callback-Funktion und ruft die Antwort als Label/Wert-Paar ab. Ich habe einen Beispielcode, wo ich versuche, ein beliebiges Label/Wert-Paar zurück zu geben und diese Option anzuzeigen, aber es funktioniert nicht. Wenn mir jemand dabei helfen oder mir ein einfaches Programm zeigen kann, wird es großartig.

http://jsfiddle.net/kB25J/

HTML:

<html> 
    <body> 
     Please enter your country name 
     <input id ="book" type="text" value=""> 
    </body> 
</html>

JavaScript:

$("#book").autocomplete({ 
    source: function(request, response) { 
     alert(request.term); 
     response(function() { 
      return { 
       label: "hi", 
       value: "bye" 
      } 
     }); 
     alert(reponse); 
    } 
});

Danke

Quelle

2012-09-19 Lakshmikanthan Vijayaraghavan

\t \t Bitte geben Sie Ihre Ländernamen . \t –

Ich habe Ihren Code aus den Kommentaren hinzugefügt. Sie können Ihren Beitrag bearbeiten, um jeden relevanten Code hinzuzufügen, anstatt den Code in den Kommentaren hinzuzufügen :) – Nope

Hallo Francois Vielen Dank Ich konnte den Code nicht einrücken –

Als Antwort sendet, ein Array übergeben, anstatt Funktion.

$(function() { 
    $("#book").autocomplete({   
     source: function(request, response) { 
      var data = [{ 
        label: "hi", 
        value: "bye" 
        }]; 
      response(data); 
     }, 
     select: function(event, ui) { 
      $("#book").val(ui.item.label); //ui.item is your object from the array 
      return false; 
     } 
    }); 
});

Quelle

2012-09-19 15:07:53 prashanth

Hallo Prashanth Code funktioniert, aber was soll die Antwort (Daten) tun? –

"Antwort" ist die Rückruffunktion, die Sie mit Ihren Daten als Parameter aufrufen können. response() erwartet ein Array als Parameter. Dieses Array könnte entweder ein einfaches Array (wie ['a', 'b']) oder ein Array von Objekten mit Eigenschaften 'label' und 'value' sein (wie [{label: 'VA', value: 'Virginia'} , {label: 'CA', Wert: 'California'}]) – prashanth

Hallo Prashanth Wird dies ein Drop-Down neben meinem Textfeld mit den Vorschlägen in diesem Fall "Hallo" anzeigen? –

Sie sollten ein Array in Ihrer Quelle zurückkehren, selbst wenn es nur 1 Spiel in diesem Fall 'hi'/'bye'

Wie auf jqueryui.com

response($.map(data.geonames, function(item) { 
    return { 
     label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, 
     value: item.name 
    } 
}));

Die in diesem Beispiel gesehen ein Array von Schlüssel/Wert-Paare für die Etiketten/Wert unter Verwendung einer Karte auf der Fernantwort zurückkehrt.

Wenn Ihre Quelle nur eine Liste von Ländern ist, können Sie einfach ein Array von Zeichenfolgen als Quelle verwenden.

var countries = ["USA", "Canada", "Mexico", ...] 

$('input').autocomplete({ 
    source : countries 
});

Wenn Sie mit einer entfernten Quelle arbeiten:

$('input').autocomplete({ 
    source : function (request, response) { 
     $.ajax({ 
      url: "url_to_get_countries", 
      dataType: "json", 
      success: function(data) { 
      response($.map(data.countries, function(item) { 
      return { 
       label: item.country_name, 
       value: item.country_id 
      } 
      })); 
      } 
     }); 
    } 
});

Quelle

2012-09-19 14:40:01 Mark

Hallo Mark Können Sie mir etwas Code geben, wie ich sagte, ich bin nicht wirklich die Art, wie Autocomplete aus der Beschreibung auf der j-Abfrage-Website funktioniert. Bitte sagen Sie mir auch, ob das mit den Vorschlägen generierte div automatisch generiert wird? –

@LakshmikanthanVijayaraghavan Arbeiten Sie mit einer Remote-Datenquelle? Wo Sie Ihre Liste für die automatische Vervollständigung abrufen, kann ich Ihnen ein Beispiel mit der Datenquelle zeigen, mit der Sie arbeiten. – Mark

Hallo Mark Ich werde autocpmlete für Länder machen Ich denke, dass die Datenbank von hier aus nicht zugegriffen werden kann.eigentlich versuche ich, Ländernamen und eine entsprechende ID mit einem Label-Wert-Paar zu bekommen –

@LakshmikanthanVijayaraghavan

Wie Sie bei Autocomplete guide sehen können, gibt es drei Möglichkeiten, die automatische Vervollständigung mit jQuery-Plugin zu implementieren.

ein Array mit der Werteliste Providing
ein Array von Objekten whith Paare Wert/label Providing
eine URL Providing

Die ersten beiden Optionen sind für das Objekt-Array zu erhalten eine feste Liste von Werten. Wenn Sie die Autocomplete-Liste dynamisch füllen wollen, müssen Sie die letzte implementieren.

Um dies zu tun, müssen Sie eine URL angeben, um das Array Objekte zu erhalten. Wenn Sie die Beschriftung und den Schlüssel ausgeblendet halten möchten, müssen Sie einen Eingabetyp ausblenden und seinen Wert ebenfalls festlegen.

Zum Beispiel

$("#book").autocomplete({ 
      source: "getValues.htm",      
      select: function(event, ui) { 
       $("#book").val(ui.item.label); 
       $("#book_hidden").val(ui.item.value); 
       return false; 
      }       
     });

getValues.html das Array von Etikett/Werte Paar zurückkehren.

this helps

Quelle

2012-09-19 15:02:04 Tux9R

Hallo Tux Ist es möglich für mich zu Tun Sie die Auswahl mit diesem Beispiel jsfiddle.net/kB25J/3. –

Hallo, ich habe Ihren Code unter http://jsfiddle.net/kB25J/4/ aktualisiert. Wie Sie sehen können, habe ich das Daten-Array außerhalb des Autocomplete-Elements definiert. Ich denke (aber nicht sicher), dass, wenn Sie ein Array von Daten in die Autocomplete-Option "source" definieren, jedes Mal, wenn Sie das ganze Array zurückgeben. Ich habe eine Eingabe eingeschlossen, um de Wert zu speichern, der gefüllt wird, wenn Sie ein Element auswählen. Denken Sie daran, dass Sie immer die Bezeichnung und nicht den Wert auswählen. Wenn Sie den Wert auswählen möchten, müssen Sie das Verhalten "Auswählen" ändern. pd. Sorry, ich habe die Änderungen nicht gespeichert :(, ich werde es nochmal bearbeiten :) – Tux9R

Ok, ich denke das ist der richtige Link -> http://jsfiddle.net/kB25J/5/ – Tux9R

Ajax, Schlüsselwertpaar, Min. Länge, um die Suche auszulösen. Einfach-Code

<script> 
    $(function() { 
     $("#CompanySearch").autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        url: '/Admin/GetCompanyAutoComplete', 
        dataType: "json", 
        data: { term: request.term }, 
        success: function (data) { 
         response(data); 
        } 
       }); 
      }, 
      minLength: 2 
     }); 
    }); 
</script>

Weitere

https://stackoverflow.com/a/40883309/5237614

Quelle

2016-11-30 08:27:41

Dies ist die beste Lösung. – dalmate

@Edathadan Ihre Antwort ist die beste Lösung. Aber ich denke, wir den Ursprung Anfrage behalten müssen, so sollten Sie ändern, um:

<script> 
    $(function() { 
     $("#CompanySearch").autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        url: '/Admin/GetCompanyAutoComplete?term=' + request.term, 
        dataType: "json", 
        success: function (data) { 
         response(data); 
        } 
       }); 
      }, 
      minLength: 2 
     }); 
    }); 
</script>

Quelle

2017-11-23 04:15:18 dalmate

Autocomplete mit jQuery Callback (Label/Wert-Paar)

Antwort

Verwandte Themen