Как создать предопределенные параметры автозаполнения как для поискового запроса

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/