Question

我正在尝试更改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>&nbsp;' +
            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);
    }
});

绑定Keydown在具有JQuery自动完成功能的搜索框中选择事件

0 个答案: