jquery 自动完成重影图片

Question

我有一个自动完成的输入。当我在输入中输入一个值时，我得到一个列表，在列表的底部它会告诉我它找到了多少条符合我的标准的记录。在我 select 列表中的值之后，列表将消失并填充控件，但它会在控件下留下 selected 值的图像。

为什么会发生这种情况，我该如何解决？

这是我的代码 returns 结果：

function FillClinicsByName() {
    if ($('#txtClinicName').val() == '') {
        $('#txtClinicName').autocomplete({
            source: function (request, response) {
                $.ajax({
                    async: false,
                    delay: 250,
                    url: "WebService1.asmx/ClinicName",
                    data: "{'Name':'" + request.term.replace(/'/g, "\&apos") + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.split('|')[0],
                                val: item.split('|')[1]
                            }    // end of return
                        }))    // end of response
                    }   // end of success
                });     // end of ajax
            },   // end of source
            select: function (e, i) {
                $('#hdfldClinic').val(i.item.val);
            },
            change: function (event, ui) {
                if (!ui.item) {
                    $(event.target).val('');
                }
            },
            minLength:1
        });     // end of autocomplete
    }   // nothing in the text box
}

我正在使用 jquery-1.10.2.js 和 bootstrap 3 和 vs2015

Answer 1

如果我不得不猜测您没有将 CSS 包含在 jQuery UI 主题中。快速修复是将此 class 添加到您的 CSS:

.ui-helper-hidden-accessible {
    display: none;
}

此内容已添加到页面以帮助屏幕阅读器实现可访问性。最好的办法是至少复制 jQuery 的 class 定义，因为将其设置为显示 none 会使屏幕阅读器忽略它。 CSS如下：

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

我相信您也可以通过编程方式关闭这些东西，但我不是 100% 确定如何做到这一点，并且不认为这是他们的一部分 API。

jquery 自动完成重影图片

jquery autocomplete ghost image

jquery

jquery-autocomplete

jquery-ui-autocomplete