Question

通常，我按如下方式使用autocomplete library：

$('#my_id_element').autocomplete({
        source: function(request, response) {
            $.ajax({ ...

由于my_id_element是动态创建的，因此我需要使用.on()方法绑定自动完成功能。我这样尝试过：

$('#my_id_element').on('autocomplete', function () {
        source: function(request, response) {
            $.ajax({...

但是，此代码段导致以下错误消息：

Uncaught SyntaxError: Unexpected token (

并指出这一行：

source: function(request, response) {

我检查了所有方括号，但它们似乎匹配，因此看来我在.on()上错误地应用了autocomplete方法。

如何正确绑定自动完成功能？

编辑：在此处发布完整代码-该代码正在运行，但是我坚持在其上应用.on()方法：

<script>
    $('#my_id_element').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '<%= autocomplete_company_name_path %>',
                dataType: "json",
                data: {
                    term : request.term
                },
                success: function(data) {
                    response(data);
                }
            });
        },
        min_length: 3,
        delay: 400,
        select: function(e, ui) {
                console.log(ui.item);
                $("#address").val(ui.item.address);
                $("#city").val(ui.item.city);
                $("#state").val(ui.item.state);
                $("#zip").val(ui.item.zip_code);
                $("#country").val(ui.item.country);
        }
    });
</script>

Answer 1

看看文档和事件部分https://api.jqueryui.com/autocomplete/#event-open

var tags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];
$("#autocomplete").on('autocompleteopen', function (event, ui) {
  console.log('test')
}).autocomplete({
  source: function (request, response) {
    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
    response($.grep(tags, function (item) {
      return matcher.test(item);
    }));
  }
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">

如何对自动完成应用.on（）方法？

1 个答案: