Jquery自动完成鼠标单击无效

时间:2018-06-13 00:05:38

标签: jquery autocomplete mouseclick-event

我面临奇怪的问题,在文本字段中获取正确的结果集以进行选择但只能使用鼠标第一次选择。如果我们从搜索框中清除文本并再次重新输入,则只有键盘选择正在运行,并且无法使用鼠标单击选择值。你能帮忙吗? 代码

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var noMatchesFound = "No matches found";

function split(val) {
return val.split(/;\s*/);}

function extractLast(term) {
return split(term).pop();}

function EnableAutoComplete(fieldName) {
        $("#" + fieldName)// don't navigate away from the field on tab when selecting an item
            .on("keydown", function (event) {
                if (event.keyCode === $.ui.keyCode.TAB &&
                    $(this).autocomplete("instance").menu.active) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                //autoFocus: true,
                search: function () {
                    // custom minLength
                    var term = extractLast(this.value);
                    if (term.length < 4) {
                        return false;
                    }
                },
                focus: function () {
                    // prevent value inserted on focus
                    //return false;
                },
                select: function (event, ui) {
                    if (ui.item.value != noMatchesFound) {
                        var terms = split(this.value);
                        // remove the current input
                        terms.pop();
                        // add the selected item
                        terms.push(ui.item.value);
                        this.value = terms;
                    }
                    return false;
                },
                open: function () {
                    $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                },
                close: function () {
                    $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                },
                source: function (request, response) {
                    $.ajax({
                        url: 'call to get account list',
                        type: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        data: JSON.stringify({ acctname: extractLast(request.term) }),
                        success: function (data) {
                            if (!data.length) {
                                var result = [
                                    {
                                        label: noMatchesFound,
                                        value: response.term
                                    }
                                ];
                                response(result);
                            }
                            else {
                                response($.map(data, function (item) {
                                    if (item.AccountName != null && item.AccountName != undefined) {
                                        return item.AccountName;
                                    }
                                }
                                ));
                            }
                        },
                        error: function (data) {
                            alert(data.responseText);
                            response($.map(data, function (item) {
                                return "Something went wrong. Please try again"
                            }));
                        },
                        failure: function (data) {
                            alert(data.responseText);
                            response($.map(data, function (item) {
                                return "Something went wrong. Please try again"
                            }));
                        }
                    });
                }
            });
    }

EnableAutoComplete("name");});

0 个答案:

没有答案