Formular Autovervollständigung in jquery

Das folgende ist ein leicht modifizierter Code, den ich in Tutorial's Point gefunden habe. Ich möchte ein Formularfeld für die automatische Vervollständigung erstellen. Wenn ein Benutzer eine Telefonnummer eingibt, wird der Name der Person angezeigt, zu der die Nummer gehört. Wie mache ich es? Ich beabsichtige, ein Tupel zu passieren wie: [("55555", "John Doe"), ("6666", "Jane Doe") ...] zu var phonenumbersFormular Autovervollständigung in jquery

<!doctype html> 
    <html lang = "en"> 
     <head> 
      <meta charset = "utf-8"> 
      <title>jQuery UI Autocomplete functionality</title> 
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
      rel = "stylesheet"> 
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> 
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 



    <!-- Javascript --> 
     <script> 
     $(function() { 
      var phonenumbers = [ 
       "555111000" 

      ]; 
      $("#automplete-2").autocomplete({ 
       source: phonenumbers, 
       autoFocus:true 
      }); 
     }); 
     </script> 
    </head> 

    <body> 
     <!-- HTML --> 
     <div class = "ui-widget"> 

     <label for = "automplete-2">Tags: </label> 
     <input id = "automplete-2"> 
     </div> 
    </body> 
</html>

Quelle

2017-06-02 Aayush Karki

Haben Sie die Dokumentation überprüft?

http://api.jqueryui.com/autocomplete/#method-_renderItem

Dies soll Ihnen helfen :)

var phonenumbers = [ 
 
    {"label":"555111000", "name":"John"}, 
 
    {"label":"555111001", "name":"Jane"} 
 
]; 
 

 
$("#myinput").autocomplete({ 
 
    minLength: 0, 
 
    source: phonenumbers 
 
}) 
 
// 
 
// This is the important part 
 
// 
 
.autocomplete("instance")._renderItem = function(ul, item) { 
 
    return $("<li>") 
 
    .append("<div>" + item.name + " : " + item.label + "</div>") 
 
    .appendTo(ul); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<input id="myinput" />

Quelle

2017-06-02 08:07:27 jacman

Formular Autovervollständigung in jquery

Antwort

Verwandte Themen