Jquery val不为文本框设置新值

Question

我使用 jqueryUI 自动完成来搜索地理名称，但我无法为我的文本框设置值 这是我的代码：

<script>
    $(function () {
        function log(message) {
            $("#appendedInputButton").val(message);
        }
        $("#appendedInputButton").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "http://ws.geonames.org/searchJSON",
                    dataType: "jsonp",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function (data) {
                        response($.map(data.geonames, function (item) {
                            return {
                                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                value: item.name
                            }
                        }));
                    }
                });
            },
            minLength: 1,
            select: function (event, ui) {
                log(ui.item ?
                    "Selected: " + ui.item.label :
                    "Nothing selected, input was " + this.value);
            },
            open: function () {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function () {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        });
    });
</script>     

我的 HTML 是：

<div class="input-append">
    <form role="search" method="get" id="searchform" action="http://sushiant.com/">
        <button class="btn" type="submit" id="searchsubmit">جستجو</button>
        <input class="span2" name="appendedInputButton" id="appendedInputButton" size="16" type="text" style="width: 300px;">
    </form>
</div>

Answer 1

解决方案

将成功函数替换为以下内容：

success: function (data) {
    response($.map(data.geonames, function (item) {
        var text = item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName;
        return {
            label: text,
            value: text
        }
    }));
}

我猜"Selected: " 部分仅用于调试目的，所以基本上您要做的是将label 和value 设置为相同的字符串。

说明

对val() 的调用非常有效。但是您看不到预期的结果，因为该值被您的response 回调函数中设置的value 字段覆盖，这是autocomplete 的默认行为。

此外，select 事件永远不应该在 ui.item 未定义的情况下被调用，因为它会精确地对项目的选择做出反应......所以无论如何都不应该达到 "Nothing selected, input was " + this.value); 替代方案。

Answer 2

试试

$("#appendedInputButton").attr('value',message);