jQuery自动完成不起作用

Question

我从jquery ui demo获得以下代码。 我对此做了一些小的修改。 这是修改后的代码。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Custom data and display</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <!--link rel="stylesheet" href="/resources/demos/style.css"-->
  <style>
  #project-label {
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
  }
  #project-description {
    margin: 0;
    padding: 0;
  }
  </style>
  <script>
  $(function() {
    var projects = [
      {
        id: "jquery",
        name: "jQuery",
        location: "the write less, do more, JavaScript library"
      },
      {
        id: "jquery-ui",
        name: "jQuery UI",
        location: "the official user interface library for jQuery"
      },
      {
        id: "sizzlejs",
        name: "Sizzle JS",
        location: "a pure-JavaScript CSS selector engine"
      }
    ];

    $( "#project" ).autocomplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( "#project" ).val( ui.item.name );
        return false;
      },
      select: function( event, ui ) {
        $( "#project" ).val( ui.item.name );
        $( "#project-id" ).val( ui.item.id );
        $( "#project-description" ).html( ui.item.location );

        return false;
      }
    })
    .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.name + "<br>" + item.location + "</a>" )
        .appendTo( ul );
    };
  });
  </script>
</head>
<body>

<div id="project-label">Select a project (type "j" for a start):</div>
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>


</body>
</html>

现在，仅当按“ j”键时，jquery才会弹出自动完成建议。 对于其他键，它什么也没做。 我在这里做错了什么？

Answer 1

这是由于采用了默认的搜索机制，它会根据字段label或value过滤内容。

使用您的自定义数据，最好像自己一样实现source方法，

$("#project").autocomplete({
    minLength: 0,
    source: function (request, response) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
        var array = $.grep(projects, function (value) {
            return matcher.test(value.id) || matcher.test(value.name) || matcher.test(value.location);
        });
        response(array);
    },
    focus: function (event, ui) {
        $("#project").val(ui.item.name);
        return false;
    },
    select: function (event, ui) {
        $("#project").val(ui.item.name);
        $("#project-id").val(ui.item.id);
        $("#project-description").html(ui.item.location);

        return false;
    }
})
    .data("ui-autocomplete")._renderItem = function (ul, item) {
    return $("<li>")
        .append("<a>" + item.name + "<br>" + item.location + "</a>")
        .appendTo(ul);
};

演示： 小提琴

Answer 2

您的项目数组上必须具有value属性：

var projects = [
        {
            id: "jquery",
            name: "jQuery",
            value:"jQuery",
            location: "the write less, do more, JavaScript library"
        },
        ...
        {
            id: "sizzlejs",
            name: "sizzle JS",
            value:"sizzle JS",
            location: "a pure-JavaScript CSS selector engine"
        }
    ];

这样，搜索引擎将开始工作。