如何制作 jquery ui-autocomplete 功能？

Posted 2023-03-14

【中文标题】如何制作 jquery ui-autocomplete 功能？

【英文标题】：How to make jquery ui-autocomplete function?

【发布时间】：2017-10-07 07:21:39

【问题描述】：

我需要为我的表单输入添加 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>

我在做自动完成功能方面很新，我可能犯了一些小错误，我要求你清楚地解释我需要在其中做哪些改变..

【问题讨论】：

你能给个小提琴吗？

这是我的小提琴，jsfiddle.net/uyxje4a5 .. ui 自动完成类未应用于表单..

jQuery autocomplete example的可能重复

【参考方案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">

【参考方案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>