Автозаполнение + Скрытое поле в jquery?
-
05-07-2019 - |
Вопрос
Я пытаюсь выполнить автозаполнение, которое отобразит что-то, а затем поместит что-то еще в скрытое поле при выборе.
Пример:
В моей базе данных у меня есть {[1, 'john'], [2, 'bob'], [3, 'john']}
Если пользователь введет 'jo
" и нажимает на первый "john
', У меня нет способа узнать, на какую запись он нажал.Поэтому мне нужно какое-то связанное скрытое поле, чтобы справиться с этим.
Есть ли плагин jquery, который делает это, или я должен создать свой собственный?
Я уже запустил, и это нормально работает с локальными значениями, но если мне нужно получить их асинхронно, это пока не работает.Я основываю свое мнение на этот плагин от bassistance.Я думаю, я мог бы запустить свои руки в код и изменить способ обработки ответов, но это сэкономило бы мне некоторое время, если бы что-то уже было сделано!
Решение
Вы можете использовать обработчик результатов и сохраните желаемое значение на скрытом входе.
Другие советы
Я знаю, что это устарело, но вот что я делаю, чтобы иметь скрытое поле, заполненное уникальным идентификатором, который никогда не отображается, и представить пользователю поле автозаполнения, основанное на отображаемых значениях:
<script type="text/javascript">
var picklist = [
{ id: "1", value: "One" },
{ id: "2", value: "Two" },
{ id: "3", value: "Three" },
{ id: "4", value: "Four" }
];
$().ready(function() {
$("#pickValue").autocomplete(picklist, {
minChars: 0,
max: 12,
autoFill: true,
mustMatch: true,
matchContains: false,
scrollHeight: 220,
formatItem: function(row, i, total) {
return row.value;
},
formatResult: function(row) {
return row.value;
}
});
$('input#pickValue').result(function(event, data, formatted) {
$('#pickID').val( !data ? '' : data.id);
});
});
</script>
После долгого поиска единственное автозаполнение, которое я нашел, ведет себя так, как вы описали, это:Список лиц
Вероятно, это помогло бы Хитрость заключается в том, чтобы возвращать false после события выбора.Это закроет выпадающий список выбора, и ваши изменения в скрытом / текстовом поле останутся видимыми.
<script type="text/javascript">
$(document).ready(function(){
$("#user_autocomplete").autocomplete({
source: "http://localhost:3000/admin/users/emails_autocomplete",
minLength: 3,
delay: 1,
select: function( event, ui ) {
if (ui.item) {
console.log("Selected: " + ui.item.value + " aka " + ui.item.label);
$("#user_autocomplete").val(ui.item.label);
$('#search_user_id_equals').val(ui.item.value);
} else {
// "Nothing selected, input was " + this.value );
}
return false;
}
});
});
...........
<input class="hidden" id="search_user_id_equals" name="search[user_id_equals]" type="hidden" />
<div class="input select optional">
<label for="user_autocomplete">User email</label>
<input id="user_autocomplete" type="text" index="" class="ui-autocomplete-input string"
autocomplete="off" role="textbox"
aria-autocomplete="list" aria-haspopup="true"
value=""
/>
</div>