文本框焦点上的自动完成菜单

时间:2015-04-07 23:48:08

标签: javascript jquery jquery-autocomplete

我有一个标识为txtAutocompletePortal的文本框。

如何在文本框的焦点上打开自动完成菜单?

这是我的代码:

Mod.SmartSearch = function (smartSearchOptions) {

    if (typeof (smartSearchOptions) == "undefined" || smartSearchOptions == null) { smartSearchOptions = {}; };
    var sS = {
        smartSearchOptions: $.extend({
            'autoFocus': false,
            'source': function (reuqest, resonse) {

            },
            'minLength': 0,
            'delay': 100,

            'select': function (event, ui) {

            },
            'messages': {
                noResults: '',
                results: function () { }
            },

        }, smartSearchOptions),
        _form: '',
        _searchFieldId: '',
        _context: '',
        _reset: {},
        _validate: {},
        _init: function () {

            $(this.searchFieldId, this.context).autocomplete(this.smartSearchOptions);

            $(this.searchFieldId, this.context).autocomplete("option", "appendTo", this._searchFieldId)

        }

    };
    return {
        form: sS._form,
        searchFieldId: sS._searchFieldId,
        context: sS._context,
        init: sS._init,
        reset: sS._reset,
        validator: sS._validate,
        smartSearchOptions: sS.smartSearchOptions
    };
};





 var source = function (request, response) {
                    if (request.term.search(/[a-z A-Z 0-9]\s/) > 0) {
                        return;
                    }
                    else {
                        $.ajax({
                            url: url + "/" + agentId + "/" +                
                            Mod.ExtractLast(request.term),
                            dataType: "json",
                            success: function (data) {
                                response($.map(data, function (item) {
                                    return {
                                        label: item.label,
                                        value: item.value
                                    }
                                }));
                            }
                        });
                    }
                };
                var select = function (event, ui) {
                    event.preventDefault();
                    if (ui.item) {
                        App.ContactInfo.portalId = ui.item.value;
                        App.ContactInfo.portalName = ui.item.label;

                        selctedPortalId = ui.item.value;
                        selctedPortalName = ui.item.label;

                        this.value = ui.item.label;
                    }
                };

                var ss = Mod.SmartSearch({ source: source, select: select });
                ss.searchFieldId = '#txtAutocompletePortal';
                ss.context = '#PortalBodySrch';
                ss.init();

1 个答案:

答案 0 :(得分:0)

要在用户点击该框时弹出jQuery Autocomplete,请使用:

var field = $( /*whatever selector */ );

field.autocomplete({
    minLength: 0,
    /* extra settings, as needed */
}).focus(function(){
    $(this).data("uiAutocomplete").search($(this).val());
});