Jquery-UI autocompete在`Keydown`事件上更改文本框值

时间:2012-12-04 11:07:08

标签: javascript jquery jquery-ui autocomplete jquery-ui-autocomplete

我在我的项目中使用jquery-UI自动完成工作正常,我的代码正在关注

   function split(val) {
        return val.split(/,\s*/);
    }
    function extractLast(term) {
        return split(term).pop();
    }
    $(".tags").autocomplete({

        source: function (request, response) {
            loc_array = request.term.split(',');
            var term = loc_array[loc_array.length - 1];
            $.ajax({
                url: "/Admin/Tag1/LookUpCompany",
                dataType: "json",
                data: "q=" + term,
                success: function (data) {
                    response($.map(data, function (item) {                  
                        return {
                            value: item.Name,
                            Name: item.Name
                        };
                    }));
                }
            });
        },
        select: function (event, ui) {
            event.preventDefault();
            var terms = split( this.value );
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push( ui.item.value );
            // add placeholder to get the comma-and-space at the end
           // terms.push( "" );
            this.value = terms.join( "," );
            return false;
        },
        minLength: 1
    });

它工作正常但是有一个问题,假设我加载页面时我的文本框有值
abc,def,ghi,

现在,如果我输入任何字符,它会以下拉列表的形式给出建议。如果我单击它,它将使用我当前的值附加单击的值,但如果我使用键盘中的向下键向下移动,则它将使用当前选定的值更改整个textbpx值。如何解决?

谢谢,

1 个答案:

答案 0 :(得分:1)

这是我的自动填充代码。输入为我工作。

$(".tags").autocomplete({
        source: function(request, response) {
            $.getJSON("/actions.php?action=autocomplete", {
                term: extractLast(request.term)
            }, response);
    },
    search: function() {
            /* custom minLength */
            var term = extractLast(this.value);
            if (term.length < 1) {
                return false;
            }
    },
    focus: function() {
            /*prevent value inserted on focus */
            return false;
        },
        select: function(event, ui) {
            var terms = split( this.value );
            /* remove the current input*/
            terms.pop();
            /* add the selected item*/
            terms.push( ui.item.value );
            /* add placeholder to get the comma-and-space at the end*/
            terms.push("");
            this.value = terms.join(", ");
            return false;
        }
    });

修改它以使其适合您的网址。我正在使用jquery ui jQuery UI - v1.8.21