Question

我必须将一些带有自动完成功能的html表单添加到某个站点。我已经使用jqueryui的自动完成功能完成了很多次，但这次出了问题。情况应该是这样的：

文本字段 - 选择城市（仅来自自动填充功能的值有效）
文本字段 - 从该城市中选择街道（同样，它是自动完成字段，取决于第一个。

因此，我创建了一个变量来保存第一个值并将其传递给第二个值，但它并不是那样。我通过debuging发布我的代码及其评论：

<script type="text/javascript">
var city = "";
var num = 0;
jQuery(document).ready(function() {

jQuery("#city").autocomplete({
    source: "<?php echo $url; //eg http://sitename.tld/somecontroller/suggestCity ?>",
    minLength: 2,
    select: function( event, ui ) {
        if(ui.item)
        {
            window.num++;
            jQuery("#city_selected").html(ui.item.value);  //this alerts correctly
            jQuery("#street").removeAttr('disabled');
            window.city = ui.item.value.toString();
            alert(window.city); // this alerts correctly
        } 
    }
}); // this executes correctly - the autocomplete works and the second field becomes enabled 
var streetUrl = "<?php echo $url; //eg http://sitename.tld/somecontroller/suggestStreet ?>/"+window.city+"/"; /* so this has to become http://sitename.tld/somecontroller/suggestStreet/$city/ where city is given from the first autocomplete */
jQuery("#street").autocomplete({
    source: streetUrl,
    minLength: 2,
    select: function( event, ui ) {
        if(window.num == 0)
            return;
        if(ui.item)
        {
            window.num++;
            jQuery("#street_selected").html(ui.item.value);
        } 
    }
}); // when this executes firebug tells me the url is http://sitename.tld/somecontroller/suggestStreet//?term=...... and here is the problem. There are two forwarding slashes that tells me the concatenation isn't ok.

});

function dump() // I created this function for debuging purposes and i attached it to button with onclick="javascript: dump(); "
{
    alert(window.city); // this displays correctly
    alert(window.num); // this displays correctly
}
</script>

提前致谢。

Answer 1

尝试

<script type="text/javascript">
var city = "";
var num = 0;
jQuery(document).ready(function() {

jQuery("#city").autocomplete({
    source: "<?php echo $url; //eg http://sitename.tld/somecontroller/suggestCity ?>",
    minLength: 2,
    select: function( event, ui ) {
        if(ui.item)
        {
            window.num++;
            jQuery("#city_selected").html(ui.item.value);  //this alerts correctly
            jQuery("#street").removeAttr('disabled');
            window.city = ui.item.value.toString();
            window.streetUrl = "<?php echo $url; ?>/"+window.city+"/";
            alert(window.city); // this alerts correctly
        } 
    }
}); // this executes correctly - the autocomplete works and the second field becomes enabled 

jQuery("#street").autocomplete({
    source: function(value, process) {
      $.ajax({
         url: window.streetUrl,
         success: function(data) {
             // create array from data. and store it eg. arrData variable
             process(arrData);
         }
      });
    },
    minLength: 2,
    select: function( event, ui ) {
        if(window.num == 0)
            return;
        if(ui.item)
        {
            window.num++;
            jQuery("#street_selected").html(ui.item.value);
        } 
    }
}); // when this executes firebug tells me the url is http://sitename.tld/somecontroller/suggestStreet//?term=...... and here is the problem. There are two forwarding slashes that tells me the concatenation isn't ok.

});

function dump() // I created this function for debuging purposes and i attached it to button with onclick="javascript: dump(); "
{
    alert(window.city); // this displays correctly
    alert(window.num); // this displays correctly
}
</script>

Answer 2

Jquery UI自动完成源属性在运行时未解析，它使用初始值初始化并使用它，除非使用选项设置API进行更改。选择城市后，您可以更改街道自动完成源URL，如下所示。我没有检查过，但它应该可以工作。

jQuery("#city").autocomplete({
    source: "<?php echo $url; //eg http://sitename.tld/somecontroller/suggestCity ?>",
    minLength: 2,
    select: function( event, ui ) {
        if(ui.item)
        {
            window.num++;
            jQuery("#city_selected").html(ui.item.value);  //this alerts correctly
            jQuery("#street").removeAttr('disabled');
            window.city = ui.item.value.toString();
            alert(window.city); // this alerts correctly
            var street = jQuery("#street");
            //street autocomplete url resolved at runtime.
            street.autocomplete('option', 'source', streetUrl + '/' + ui.item.value.toString());
        } 
    }
});

var streetUrl = "<?php echo $url; //eg http://sitename.tld/somecontroller/suggestStreet ?>

jquery空连接与qjueryui的自动完成

2 个答案: