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

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

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

代码示例

提供一个回调函数来作为init处理change事件   选项。

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

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

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

Answer 2

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

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

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

});

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

2 个答案: