jquery 中的表单自动完成

Question

以下是我在 Tutorial's Point 上找到的稍微修改过的代码。我想制作一个自动完成表单字段，如果用户键入 phone 号码，则会显示该号码所属人员的姓名。我该怎么做？我打算传递一个像这样的元组：[("55555", "John Doe"), ("6666", "Jane Doe")...] 到 var phonenumbers

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

Answer 1

你查过文档了吗？

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

这应该对你有帮助:)

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

jquery 中的表单自动完成

Form autocompletion in jquery

html

jquery

jquery-ui-autocomplete