在jquery中自动完成表格

问题描述：

以下是我在Tutorial's Point上找到的稍微修改后的代码。我想创建一个自动填写表单字段，如果用户键入电话号码，则会显示号码所属人的姓名。我该怎么做？我打算通过一个元组，如：[（ “55555”， “李四”），（ “6666”， “李四”）...]以var phonenumbers在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>

答

你检查的文件？

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中自动完成表格

相关推荐