JQuery UI自动完成不会在第一次自动显示结果

时间:2017-01-13 11:10:29

标签: jquery jquery-ui

我正在使用JQuery UI自动填充功能来显示结果。它似乎在每种情况下都能正常工作,接受我第一次粘贴文本框中的值。它会获取结果,但自动完成功能不显示结果,除非我必须按下向下键。我按下键,它会显示自动完成ui的结果。下次我将该单词粘贴到搜索时,它可以正常工作并显示自动完成结果。以下是我正在使用的代码:

$("input.autocompleteData").on('input', function (e) {
        e.stopImmediatePropagation();
        var txtVal = $(this).val().toLowerCase();
        var pastedValue = true;
        getAutoCompletedata($(this), txtVal, pastedValue);
    });

function getAutoCompletedata(cntl, input, pastedValue) {

        var self = this;
        if (input.length < 2) {
            // Clear the array
            self.hqListData = [];
        }
        else if (input.length == 2 || pastedValue) {

            getHQListData(input);
        }
        // first clear array
        self.hqFilterListData = [];
        // fill data 
        // for text length greater than minLengthForSearch filter data from array
        $.each(self.hqListData, function (i, val) {

            if (val != undefined && val != null && val.name.toLowerCase().indexOf(input) >= 0) {

                //push data into payerFilterList
                self.hqFilterListData.push({ label: val.name, value: val.id });
            }
        });




        $(cntl).autocomplete({
            source: self.hqFilterListData, scroll: true, select: function (e, ui) {
                var uniqueId = new Date().getTime();
                var alreadyAdded = false;

                $("div#resultsection input[type='hidden']").each(function (i) {
                    if (unescape(this.value).trim() === unescape(ui.item.value).trim()) {
                        alreadyAdded = true;
                        return false;
                    }
                });
                if (!alreadyAdded) {
                    $("#resultsection").empty();
                    $("#resultsection").append("<span id='" + uniqueId + "' class='multiselectContainer'><span class='indivSelectedText'>" + ui.item.label + "</span><input class='indivSelectedValue'  type='hidden' value=" + escape(ui.item.value) + " ></input> <a href='#' class='fa fa-times-circle labelclose'></a></span>");
                }
                $(cntl).val('');
                return false;
            },
            focus: function (event, ui) {
                $(this).val(ui.item.label);
                return false;
            }
        });



    }

function getHQListData(input) {
        var self = this;
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "ReviewPools.aspx/GetHQList",
            data: JSON.stringify({ 'searchText': input }),
            dataType: "json",
            async: false,
            success: function (output) {
                var retVal = JSON.parse(output.d); // output.d
                if (retVal.length === 0) {
                    alert("No Headquarter Found");
                    return false;
                }
                self.hqListData = [];
                $.each(retVal, function (i, val) {
                    self.hqListData.push({ "id": val.BUSINESS_RID, "name": val.COMPANY_NAME });
                });
            },
            error: function (errormsg) {
                alert(errormsg.responseText);
                state = 0;
            }
        });
    }

第一次粘贴值时,一切正常。它确实得到了结果,但只有在按下向下键时才会显示。这是JqueryUI的问题吗?我错过了什么?

1 个答案:

答案 0 :(得分:-1)

试试这个

<input type="text" onpaste="myFunction()" value="Paste something in here">