0

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

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

因此，出于这个原因，我创建了一个变量来保存第一个值并将其传递给第二个值，但它并不完全如此。我正在通过调试发布我的代码并对其进行评论：

<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>

提前致谢。

4

2 回答 2

0

尝试 

<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>
于 2013-05-10T18:53:45.767 回答
0

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 ?>
于 2013-05-10T18:54:41.697 回答