Question

假设我有以下代码：

HTML：

 <form name="searchForm">
   <input type="text" id="Fruit" name="getFruit"/>
 </form>

使用Javascript：

function Fruit(name, color){
  this.name = name;
  this.color = color;
};

var database = {};
database['banana'] = new Fruit("Banana", "Yellow");
database['apple'] = new Fruit("Apple", "Red");
database['orange'] = new Fruit("Orange", "Orange");
database['apple pear'] = new Fruit("Apple Pear", "Green");

如何使用自动完成功能，以便在用户键入“apple”时，它会为他们提供从下拉菜单中选择“apple”或“apple pear”的选项，并在您单击时填充表单文本框它？当你尝试输入内容时谷歌会给出一些建议。

我在想我想使用jquery http://jqueryui.com/autocomplete/，但我不确定如何实现它。

$( "#Fruit" ).autocomplete({
      source: database // How would you implement this?
    });

这不是我的完整代码，但是上次发布我的所有代码时，它的内容太多了，所以我创建了这个代码来举例说明我正在尝试做的事情。

Answer 1

你走在正确的轨道上。 jQuery UI的自动完成小部件包含一系列项目可供选择。我们可以使用jQuery的map方法将数据库对象映射到一个键数组，然后将其用作自动完成源。

 <form name="searchForm">
   <input type="text" id="Fruit" name="getFruit"/>
 </form>

function Fruit(name, color){
  this.name = name;
  this.color = color;
};

var database = {};
database['banana'] = new Fruit("Banana", "Yellow");
database['apple'] = new Fruit("Apple", "Red");
database['orange'] = new Fruit("Orange", "Orange");
database['apple pear'] = new Fruit("Apple Pear", "Green");

var source = $.map(database, function(val, i) {
  return i;
});

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

Try it out on jsFiddle!

Answer 2

Twitter Bootstrap有一个很好的jQuery插件，可以帮助你：http://twitter.github.com/bootstrap/javascript.html#typeahead

只需使用

$( element ).typeahead( { source: arrayOrFunction } );

记录非常清楚，所以你应该能够弄明白。 =）

jQuery UI的自动完成也以类似的方式执行此操作。只需传递一个字符串数组或一个将查询作为第一个参数并将回调作为第二个参数的函数，并使用自动完成选项调用回调。

自动填充搜索...？可能使用jquery？

2 个答案: