如何制作 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

尝试一些更简单的代码，然后继续扩展逻辑！检查下面的 sn-p 以获取最小版本的代码。

$("input#search-textbox").autocomplete({
    source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
});

<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>
<input id="search-textbox" class="topic-picker ui-autocomplete-input" type="text" maxlength="100" name="q" acceskey="b" autocomplete="off" placeholder="enter text" role="textbox" aria-autocomplete="list" aria-haspopup="true">

Answer 2

首先使用 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>