Question

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

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

在“产品”中搜索

搜索“订单”

搜索“发票”

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

这就是我想要的字段看起来和表现的样子 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中使用服务器端处理，也不想通过单选按钮破坏导航。

Answer 1

您可以使用自动完成的更改事件来获取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/

如何为搜索查询创建预定义的自动完成样参数

1 个答案: