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


Converting Select list to Jquery UI Autocomplete

我有以下选择框,我正在用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)。非常感谢任何帮助,谢谢。

绑定到自动完成的更改事件。从 jquery ui 文档:

当字段模糊时触发,如果值已更改;ui.item 指所选项目。

代码示例

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

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

按类型绑定到更改事件:自动完成更改。

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

我最好的猜测是您需要将选择处理程序添加到传递给自动完成的选项中,如下所示:

$(document).ready(function() {
    $( "#sel" ).autocomplete({
        source: "xml/states.php",
        minLength: 0,
        select: function(event, ui) {
            findCity(ui);
        }
    });
});