О JQuery UI Автозаполнение и текстовые предложения.!

Question

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

Я видел примеры, который работает, как, когда пользователь пишет, он показывает ниже некоторые варианты, но и написать дополнение 1 вариант, чтобы выбрать в качестве «HTML заполнителем», так это выглядит как:

| «IM SEARCHING SOMET_» hing on over over over |

(я знаю, что вы получите идею)

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

Я думал, как писать код на «открытое» событие плагина, но 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 }; 
         })); 
        } 
       }) 
      } 
     }); 

Спасибо заранее (и жаль, если это слишком noobish).!

Answer 1

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

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

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

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

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