我正在尝试更改JQuery自动完成对某些键盘输入的响应方式。
我希望用户能够从自动完成用户界面中突出显示一个项目,然后按Tab,向右箭头,空格键或输入以使它们进行选择 ,然后立即将光标移至搜索栏的末尾继续向搜索添加字词。
这是我现在正在使用的代码。我正在尝试“ setCursorPosition”功能做,以将光标移动到搜索框中的文本末尾,但是我无法使自动完成功能与“ setCursorPosition”一起激活onSelect函数',同时检查某些按键。
auto_options = {
cache: false,
source: function(term, response) {
$.getJSON('/api/contracts/search/', {
q: term
}, function(data) {
response(data);
});
},
renderItem: function(item, search) {
var iconClass = ((item[0] == '@(AutocompleteType.SavedSearch)') ? 'fa fa-star-o' : 'fa fa-file-o');
$('input[name="id"]').remove();
search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
return '<div class="autocomplete-suggestion" data-mytype="' +
item[0] + '" data-myval="' +
item[1] + '" data-myattribute="' +
item[2] + '" data-myoperator="' +
item[3] + '" data-myusid="' +
item[4] + '" data-my1stsearch="' +
item[5] + '" data-val="' +
search + '"><i class="' +
iconClass + '"></i> ' +
item[1].replace(re, "<b>$1</b>") + '</div>';
},
onSelect: function(e, term, item) {
if (item.data('my1stsearch').length > 0) {
$('input[name="searchCondition"]').val(item.data('my1stsearch') + item.data('myval'));
} else {
$('input[name="searchCondition"]').val(item.data('myval'));
}
if (item.data('mytype') == '@(AutocompleteType.SavedSearch)') {
$('#navSearchForm').append('<input type="hidden" name="id" value="' + item.data('myusid') + '" />');
}
}
}
$.fn.setCursorPosition = function(pos) {
this.each(function(index, elem) {
if (elem.setSelectionRange) {
elem.setSelectionRange(pos, pos);
} else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
});
return this;
};
$('input[name = "searchCondition"]').keydown(function(e) {
$('input[name="searchCondition"]').autoComplete(auto_options);
// if user has pressed space or tab or enter or right arrow
if (e.keyCode == 32 || e.keyCode == 9 || e.keyCode == 13 || e.keyCode == 39) {
$('input[name="searchCondition"]').setCursorPosition(3000);
}
});