О предложениях JQuery UI Autocomplete и Textbox.

Question

Я пытаюсь реализовать компонент автозаполнения для текстового поля.Я использую плагин автозаполнения jquery ui, хотя он работает как выпадающий список, а не как автозаполнение!

Я видел примеры, которые работают так, как когда пользователь пишет, ниже показаны некоторые опции, но также пишут дополнение к 1-му варианту, чтобы выбрать в качестве «заполнителя html», чтобы он выглядел так:

| "IM SEARCHING SOMET_" в зависимости от переполнения стека |

(я знаю, вы поняли)

Мне нужно направить пользователя о том, что онписать и заставлять его выбирать один из предметов, которые я поднимаю (с помощью json или чего-то еще), например, действительно «завершать» то, что он пишет.Я хочу что-то вроде атрибута "selectFirst" в этом плагине.Кажется, на этом ничего нет.Итак, что вы, ребята, предлагаете?

Я думал как написать какой-нибудь код для события "open" плагина, но Idk, с чего начать.Возможно, что-то там уже сделано, поэтому мне не нужно тратить на это целую неделю.

Мой код уже выглядит так:

$(".destination").autocomplete({
            minLength: 2,
            autoFocus: true, open: function(event, ui){ /* DO THE MAGIC HERE */ },
            source: function (request, response) {
                $.ajax({
                    url: "@Url.Action("SearchDestinations", "Json")", type: "POST", dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                        response($.map(data, function(item){
                            return { label: item.Description, value: item.Description, id: item.Id };
                        }));
                    }
                })
            }
        });

Заранее спасибо (и извинитеесли это слишком нубишно).!

Answer 1

Это не очень распространенное поведение для автозаполнения текстовых полей, и вы не знаете, почему вы пытаетесь убедить пользователя сделать свой выбор (как вы узнаете, что первый выбор всегда лучший?).

Если вы настраиваете такую ​​функцию, убедитесь, что текст, который вы задаете по умолчанию, вводится в текстовое поле после ввода пользователя совершенно иным образом, чтобы пользователю было понятно, что он набрал, а что вам нужно.предлагают (посмотрите, как Google Instant делает это с результатами поиска, используя очень светлый текст - также обратите внимание, что Google не пытается направлять ваш поиск, а скорее показывает вам, для чего нужны результаты мгновенного поиска).Пользователи могут или не могут быть удивлены, увидев дополнительный текст, появляющийся после того, что они печатают, и, учитывая, что их взгляд сфокусирован на текстовом поле, могут быть склонны принять это в качестве своего ввода, не рассматривая другие варианты, появляющиеся ниже, которые могут быть лучше.Вы захотите принять во внимание обе точки при проведении пользовательского тестирования.

При этом вы можете получить доступ к тексту первого выбранного элемента в раскрывающемся списке автозаполнения с помощью селектора, подобного этому.:

$(".ui-autocomplete li:first a").text();

Затем, используя общий метод JavaScript substr () , вы можете получить только текст из выделенного фрагмента после ввода, введенного пользователем, и отобразить его в текстовом поле.после ввода пользователя.