jQuery UI 使用不同的输入自动完成

Question

我想为不同的输入添加不同的自动完成。例如我有以下两个输入字段：

<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
    });
});

这对我来说很好，但也许有更好的方法，比如参数？这样我就可以在自动完成字段上只使用一个 class 并且只能使用一个 .php-file 哪个 return 结果相同？

Answer 1

试试这个：

$( 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,

    });

});

Answer 2

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

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

然后，在创建小部件时直接在create event, you can look for this attribute and set it as the source. This code is now applicable in many places, since you don't have to pass the 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'

jQuery UI 使用不同的输入自动完成

jQuery UI autocomplete with different inputs

php

jquery-ui

autocomplete

input