javascript - 如何制作 jquery ui-autocomplete 功能？

Question

我需要为我的表单输入添加 jquery ui-autocomplete 函数，其中应该建议已添加的数字，我的表单输入代码是

    <div class="input-group">
      <span class="input-group-addon">Purchase No </span>
      {!! Form::input('text', 'purchase_number', $purchase_number, array('id' => 'purchase_number', 'class' => 'input-lg form-control TabOnEnter', 'placeholder' => 'purchase_number')) !!}
    </div>

我尝试使用 jquery 脚本的是，

<script>
$(function() {

  $("#purchase_number").autocomplete({
    autoFocus: true,
    minLength: 0,
  select: function (event, ui) {
    $('#purchase_number').val(ui.item.purchase_number);
  }
})
.focus(function () {
  $(this).autocomplete("search", "");
});

$("#purchase_number").autocomplete().data("uiAutocomplete")._renderItem = function (ul, item) {
  return $("<li>")
  .append("<a>" + item.purchase_number + "</a>")
  .appendTo(ul);
};

});

</script>

我对自动完成功能非常陌生，我可能犯了一些小错误，我请求您对我需要对其进行哪些更改给出明确的解释..

Answer 1

首先使用 jquery 尝试简单的代码。首先在您的页面中包含 jquery.js、jquery.ui.js 和 jquery.ui.css。

$(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];


  $("#purchase_number").autocomplete({
    	source:availableTags
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="input-group">
              <label class="input-group-addon">Purchase No </label>
              <input type ="text" id="purchase_number" />
            </div>