Question

以下是我的代码要点：https://gist.github.com/anuragk098/3e11673136325b5e5b1859bde11f2117 这是我的页面：http://abachelorskitchen.com/

在第一个文本框中，我从jquery函数获取所有城市：

var months = [<?=$city;?>];
            $('#tbCountries1').autocomplete({
                source : months,
                minLength: 0,
                minChars: 0,
                max: 12,
                autoFill: true,
                mustMatch: true,
                matchContains: false,
                scrollHeight: 220,
                formatItem: function(data, i, total) {
                    if ( data[0] == months[new Date().getMonth()] ) 
                        return false;
                    return data[0];
                }
            }).on('focus', function(event) {
                var self = this;
                $(self).autocomplete( "search", "");;
            });

和onblur我正在调用ajax函数来获取该城市中的所有区域。但是现在我希望另一个jquery函数中的所有区域从哪个区域文本框中显示结果。

Ajax功能：

function getarea(city){
                $.ajax({
                    url: '<?php echo base_url()?>Home/getArea',
                    type: 'POST',
                    data: {id: city},

                    success: function(data) {
                    area = data;
                    }
                });
                }

现在，区域变量包含类似'area1'，'area2'的字符串。 还有另一个jquery方法，我从哪里获取区域：

$(document).ready(function() {      
        $('.select2').select2();
        });

              $( function() {
                var availableTags = [area];
                $( "#tbCountries" ).autocomplete({
                  source: availableTags
                });
              } );

检查要点以获取所有代码和页面链接，以便更好地了解我想要实现的功能。

Answer 1

如果你想根据第一个输入中的选择自动完成第二个输入，你可以像第一个输入那样初始化第二个输入（tbCountries）的自动完成（tbCountries1），但是给自动完成源选项为像这样的函数：

$('#tbCountries1').autocomplete(
{
  /* Other options here */
  source: function(request, response)
  {
    /* Fetch the the data using request.term and value from tbCountries1 */
    var options = getarea($("#tbCountries1").val());
    /* Then return the array to the callback */
    response(options);
  }
});

此处有关源选项的更多信息： http://api.jqueryui.com/autocomplete/#option-source

修改

确定。我会尝试更多地解释我的想法。对于第一个输入字段，您可以添加所有支持的城市的列表。您已定义变量

var months = [<?=$city;?>];

您插入到第一个自动完成中，如下所示：

source : months,

对于第二个输入，您可以创建类似的自动完成，但不是传递月份变量，而是可以使用函数根据所选城市动态创建一个局部数组。因此，对于第二个输入，您将执行以下操作：

$("#tbCountries").autocomplete( { /* Other options here */ source: function(request, response) { /* Here we pass the selected city, the searched locality and */ /* the callback for the autocomplete */ getarea($("#tbCountries1").val(), request.term, response); } });

您可以按如下方式编辑getArea函数：

function getarea(city, searched, response) { $.ajax( { url: '<?php echo base_url()?>Home/getArea', type: 'POST', data: { id: city }, success: function(options) { /* If the options is not an array, you need to convert it to one here */ var optionsFiltered = $.ui.autocomplete.filter(options, searched); response(optionsFiltered); } }); }

如何将ajax响应存储到文本框中html中使用的jquery变量中

1 个答案: