jQuery UI自动完成与不同的输入

时间:2015-02-25 22:21:13

标签: php jquery-ui input autocomplete

我想为不同的输入添加不同的自动填充功能。例如,我有以下两个输入字段:

<input type="text" id="firstname" name="firstname" placeholder="Max" required />
<input type="text" id="lastname" name="lastname" placeholder="Mustermann" required />

所以我目前添加不同的自动填充功能如下:

$( document ).ready(function() {
    $( '#firstname' ).autocomplete({
        source: 'autocomplete_firstname.php',
        minLength: 1
    });
    $( '#lastname' ).autocomplete({
        source: 'autocomplete_lastname.php',
        minLength: 1
    });
});

这对我来说很好,但也许有更好的方式像参数?这样我只能在自动填充字段上使用一个类,只能使用一个返回相同结果的.php文件?

2 个答案:

答案 0 :(得分:0)

试试这个:

$( document ).ready(function() {
var focused_inp;

    $( '#firstname,#lastname' ).on('focus',function(){ focused_inp = $(this).prop('name');}).autocomplete({
        source: function(req, res){
      $.ajax({
      url: "autocomplete.php",
      dataType: "jsonp",
      data: {action: focused_inp, data: request.term  },
      success: function(result) { res(result)  }
    }) },
        minLength: 1,

    });

});

答案 1 :(得分:0)

如果要将自动填充实例化代码与输入标记分离,可以将自动完成源设置为数据属性。

<input type="text" data-source="foo.php"/>
<input type="text" data-source="bar.php"/>

然后,在create事件中,您可以查找此属性并将其设置为源。此代码现在适用于许多地方,因为您在创建窗口小部件时不必直接传递source选项:

$('input').autocomplete({
    minLength: 1,
    create: function() {
        var $this = $(this),
            source = $this.data('source');
        if (source) {
            $this.autocomplete('option', 'source', source);
        }
    }
});

$('input').first().autocomplete('option', 'source');
// → 'foo.php'

$('input').last().autocomplete('option', 'source');
// → 'bar.php'