Question

我试图在我的表单中使用jquery组合框，但最终会给出一个包含所有可能单词的巨大列表。您是否有可能只选择该列表中的第一个单词并建议将文本框填入？而不是给出一个大清单。

到目前为止，这是我的代码。

Jquery的：

$(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"
    ];
     $( "#tags" ).autocomplete({
       source: availableTags
    });
});

HTML：

<select id="tags" class="easyui-combobox" name="dept" style="width:200px;">
    <option value="aa">aitem1</option>
    <option>bitem2</option>
    <option>bitem3</option>
    <option>ditem4</option>
    <option>eitem5</option>
</select>

由于某种原因，我无法让它在jsfiddle中工作，这是工作的jquery示例：http://jqueryui.com/autocomplete/

Answer 1

您从JQuery UI

提供的示例的

Here is a fiddle

你可以在JS Fiddle中使用它来理解它如何更好地工作。

在您的网站中使用它时，您将需要CDN链接到CSS和JS文件这里是链接

CSS：https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css

Javascript：https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js

或者，如果您想将自己添加到标题中，则可以在Google上找到它的链接：https://developers.google.com/speed/libraries/devguide#jquery-ui

代码非常简单

<强> HTML

<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>

<强>使用Javascript / JQuery的

 //Here we create an array of tags
 $(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"
]; //in the code below we call the autocomplete method from JQuery UI on the element with the "tags" ID,in this case an input element set as textbox
$( "#tags" ).autocomplete({
source: availableTags //here is where we pass the array we created earlier so that the javascript knows what to populate the search criteria with
});
});

如果由于某种原因你仍然需要一个select元素用于此目的，那么看看Chosen.js here

这将使用select元素提供类似的功能。

如有任何问题，请给我发表评论：）

Jquery组合框填满文本框

1 个答案: