Question

自动完成工作正常，但当我输入搜索并选择一个选项时，文本框中显示的值会更改为该值而不是保留已输入的值。如何防止您输入框中的内容发生变化？

<script type="text/javascript">
$(document).ready(function () {
    $("#Name").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/starsearch/starindex",
                type: "POST",
                dataType: "json",
                data: { Prefix: request.term },
                success: function (data) {
                    response($.map(data, function (item) {                          
                        return { label: item.Name, value: item.Filename };
                    }))

                }
            })
        },
        select: function (event, ui) {
            $('#idBox').html('<a href="/star/' + ui.item.value +'">' + ui.item.label + '</a>');
        },
        messages: {
            noResults: "", results: ""
        }
    });
})

Answer 1

根据https://api.jqueryui.com/autocomplete/#event-select

选择项目时会触发选择事件，默认操作是将文本字段的值替换为所选项目的值。

您可以通过event.preventDefault();

阻止默认操作

尝试以下代码

<script type="text/javascript">
$(document).ready(function () {
    $("#Name").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/starsearch/starindex",
                type: "POST",
                dataType: "json",
                data: { Prefix: request.term },
                success: function (data) {
                    response($.map(data, function (item) {                          
                        return { label: item.Name, value: item.Filename };
                    }))

                }
            })
        },
        select: function (event, ui) {
            event.preventDefault();
            $('#idBox').html('<a href="/star/' + ui.item.value +'">' + ui.item.label + '</a>');
        },
        messages: {
            noResults: "", results: ""
        }
    });
})

Jquery Ajax自动完成，文本正在发生变化

1 个答案: