将选择列表转换为 Jquery UI 自动完成

Question

我将以下选择框替换为 Jquery 自动完成功能：

<select name="selectarea" onchange="findCity(this.options[this.selectedIndex].value);" id="sel" />

Jquery UI 自动完成代码是：

$(document).ready(function() {
    $( "#sel" ).autocomplete({
            source: "xml/states.php"
    });

    $( "#sel"  ).autocomplete('option','minLength',0);

    $( "#sel"  ).bind("click", function(event, ui) { 
    $( "#sel"  ).autocomplete( "search" , '' );

    }); 

});

问题是我不知道在哪里调用 Jquery 代码中的“findCity”javascript。它收到的 json 响应来自一个 php 文件，数组如下所示：

$STATES = array("scAllBusinesses"=>"All Businesses", 
"scAppraisals"=>"Appraisals", 
"scArchitect"=>"Architect", 
"scArtGallery"=>"Art Gallery", 
"scAttorney"=>"Attorney", 
"scBallet"=>"Ballet", 
"scBanks"=>"Banks", 
"scBar"=>"Bar",
);

自动完成工作正常并填充，只是不确定在哪里放置 javascript 调用 (findCity)。非常感谢任何帮助，谢谢。

Answer 1

我最好的猜测是您需要向传递给自动完成的选项添加一个选择处理程序，如下所示：

$(document).ready(function() {
    $( "#sel" ).autocomplete({
        source: "xml/states.php",
        minLength: 0,

        select: function(event, ui) {
            findCity(ui);
        }
    });

});

Answer 2

绑定到自动完成的更改事件。 From the jquery ui documentation:

字段模糊时触发，如果值发生变化； ui.item 指的是选定的项目。

代码示例

提供一个回调函数来将更改事件作​​为一个 init 来处理 选项。

   $( ".selector" ).autocomplete({
   change: function(event, ui) { ... }
});

按类型绑定到更改事件：autocompletechange。

$( ".selector" ).bind( "autocompletechange", function(event, ui) {
  ...
});