jQuery自动完成小部件如何将当前值作为参数传递给webservice答案

【问题标题】：jQuery autocomplete widget how to pass current value as parameter to webservicejQuery自动完成小部件如何将当前值作为参数传递给webservice
【发布时间】：2012-07-14 09:53:54
【问题描述】：

我正在尝试在我的 jquery 移动页面中实现 jquery 自动完成小部件以建议城市列表。当用户输入更多 2 个或更多字符时，我想将当前键入的文本传递给 web 服务并返回所有匹配项并将它们显示在选择框中。但是，我不知道如何传递当前键入的文本，结果是为参数“prefixText”传递了一个空字符串，在这种情况下，我的 web 服务只返回所有结果。

如何在每次用户输入新字符时更新源调用中的 prefixText 参数？

<div class="demo">
<div class="ui-widget">
    <label for="cities">Cities: </label>
    <input id="cities" type="text" />
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</div><!-- End demo -->


$(function () {
    function log(message) {
        $("<div/>").text(message).prependTo("#log");
        $("#log").scrollTop(0);
    }

    $("#cities").autocomplete({
        source: "http://www.mydomain.com/service.svc/cities/?cid=1&pid=3&prefixText=" + $('#cities').val(),
        minLength: 2,
        select: function (event, ui) {
            log(ui.item ?
            "Selected: " + ui.item.value + " aka " + ui.item.id :
            "Nothing selected, input was " + this.value);*/
        },
        search: function (event, ui) {
            alert($('#cities').val());              
        }

    });
});

【问题讨论】：

标签： jquery jquery-mobile jquery-autocomplete

【解决方案1】：

您应该通过.on(...) 将侦听器绑定到您的输入字段。我给你举了一个例子： http://jsfiddle.net/Calavoow/q8RuD/1/

我不太确定 keyup 是否是正确的绑定事件，但它适用于 PC。如果它对您不起作用，您也可以绑定到“更改”。但是它不会更新每个按键。完成后，您可以重新应用自动完成功能。请参阅以下答案： Jquery: Possible to dynamically change source of Autocomplete widget?

【讨论】：