Question

以下是我在Tutorial's Point上找到的略微修改过的代码。我想创建一个自动填充表单字段，如果用户键入电话号码，则会显示该号码所属人员的姓名。我该怎么做？我打算传递一个元组，如：[（＆＃34; 55555＆＃34;，＆＃34; John Doe＆＃34;），（＆＃34; 6666＆＃34;，＆＃34; Jane Doe＆＃34;） ......]到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

这应该可以帮助你：）

＆＃13;

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 );
};

＆＃13;

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

＆＃13;

在jquery中表单自动完成

1 个答案: