时间戳

首页 > 解决方案 > 如何为搜索查询创建预定义的自动完成类似参数

jquery - 如何为搜索查询创建预定义的自动完成类似参数

问题描述

我正在导航中创建一个搜索字段来搜索数据库中的内容。在数据库中，我有几个实体，如产品、订单和发票。我希望用户编写搜索词，然后指定他希望从哪个实体搜索该词。

所以用例是：用户只需在输入字段中输入搜索词，就会出现一个带有预定义选项的自动完成框：

在“产品”中搜索

在“订单”中搜索

在“发票”中搜索

然后用户手动选择一个给定的选项，搜索词连同该选择的参数一起被发送到后端进行结果处理。

这是我希望该字段的外观和行为 http://jsfiddle.net/wr1Lm6t5/

Search: <input type="text" />

$("input").autocomplete({
    source: ["Search in 'Products'", "Search in 'Orders'", "Search in 'Invoices'"],
    minLength: 0,
}).focus(function () {
    $(this).autocomplete("search");
});

但问题是在选择自动完成选项搜索词时会丢失。

我不能使用带有 ajax 的服务器端处理，我不想破坏单选按钮的导航。

标签： jqueryhtmlcssjquery-ui

解决方案

您可以使用自动完成的更改事件来获取 ajax

$("#parent").autocomplete({
source: [ { label: "Products", value: "Products" },{ label: "Invoices", value:"Invoices" },{ label: "Orders", value: "Orders" }],
    minLength: 0,

  change: parentChange
}).focus(function () {
    $(this).autocomplete("search");
});

这对你有用吗？检查小提琴。 http://jsfiddle.net/83tbcnsz/2/

推荐阅读