javascript - jquery ajax 自动完成搜索,如何使用 jquery 进行标签自动完成搜索?

标签 javascript jquery ajax search autocomplete

假设数据库表、文本文件或xml文件中有标签。

现在,当用户在文本框中输入内容时,它将调用 jquery ajax 自动完成搜索功能,就像我们为 stackoverflow 标签添加所做的那样。

如何使用 jquery ajax 做到这一点?有人可以发布完整的代码和示例吗?

我读过这篇文章,http://docs.jquery.com/Plugins/Autocomplete ,但无法理解如何实现。

最佳答案

我建议您使用jQuery UI AutoComplete 。该文档提供了如何使用 AJAX 进行设置的完整示例。

您放置一个输入字段:

<input id="tags" name="tags" />

然后应用插件:

$(function() {
    $('#tags').autocomplete({
        source: '/tags',
        minLength: 2
    });
});

这将调用 /tags 服务器端脚本并向其传递将包含输入值的术语查询字符串参数。例如:/tags?term=asp。然后,服务器将使用 asp 值在数据库中查找并使用以下形式的 JSON 进行响应:

[ { "id": "1", "label": "label 1", "value": "value 1" }, 
  { "id": "2", "label": "label 2", "value": "value 2" },
  { "id": "3", "label": "label 3", "value": "value 3" },
  ...
]

它将表示与搜索条件匹配的对象数组,并将显示在下拉列表中。

显然,服务器端脚本的实现很大程度上取决于您所使用的服务器端语言、数据库访问技术……

关于javascript - jquery ajax 自动完成搜索,如何使用 jquery 进行标签自动完成搜索?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8404267/

相关文章:

javascript - 如何更改动画宽度属性以转换比例

javascript - 如何将数据从一个函数导出到另一个函数

javascript - 如何缩小我的谷歌浏览器扩展程序的 javascript 文件

javascript - 如何获取head中添加的文件的lastModified属性?

javascript - 如何访问 JQUERY 中不同 js 文件内的函数?

javascript - 此 javascript 适用于除 Internet Explorer 之外的所有浏览器!

javascript - 获取 CSV 字符串的最后一部分

jquery - 串行和并行运行函数

javascript - 使用 Javascript 将特定的 div 加载到 iFrame 或 div

jQuery 显示具有特定类的子元素