3

可以说我有以下代码：

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”的选项，并在您单击它时填充表单文本框？当您尝试输入内容时，Google 会如何给出建议。

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

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

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

4

2 回答 2

5

你在正确的轨道上。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
});

在 jsFiddle 上试试吧！

于 2013-02-12T18:46:57.747 回答
0

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

只需使用

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

它有很好的记录，所以你应该能够弄清楚。=)

jQuery UI 的自动完成功能也以类似的方式做到这一点。只需传递一个字符串数组或一个函数，将查询作为第一个参数，将回调作为第二个参数，然后使用您的自动完成选项调用回调。

于 2013-02-12T18:45:09.043 回答