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>

Answer 2

尝试使用一些更简单的代码然后继续扩展逻辑！请查看以下代码段以获取最低版本的代码。

＆＃13;

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

＆＃13;

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

＆＃13;

如何制作jquery ui-autocomplete函数？

2 个答案: