php - 将选择列表转换为 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

My best guess is you need to add a select handler to the options passed to autocomplete like so:

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

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

});

Answer 2

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

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

代码示例

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

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

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

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