自动完成搜索..?可能使用jquery

Autocomplete Search...? Possibly using jquery?

本文关键字：jquery 搜索      更新时间：2023-09-26

假设我有以下代码：

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"，并在您单击表单文本框时填充它？有点像谷歌在你尝试键入内容时给出的建议。

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

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

这不是我的完整代码，但上次我发布所有代码时，它太多了，无法阅读，所以我创建它只是为了给我一个尝试做什么的例子。

你走在了正确的轨道上。jQueryUI的自动完成小部件接收一组项目进行选择。我们可以使用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上试试吧！

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

只需使用

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

它有很好的文档记录，所以你应该能够弄清楚

jQueryUI的自动完成也以类似的方式完成。只需传递一个字符串数组或一个函数，该函数将查询作为第一个参数，将回调作为第二个参数，然后使用自动完成选项调用回调。

相关文章：