javascript - 使用数据属性和 jquery 可重用

Question

我的文本框中附加了许多 Bootstrap Type-ahead。我当时使用那里的 id 来选择并附加输入。

样本

$("#SireTag").typeahead({
    source: function (query, process) {

        $.ajax({

            url: '/Bull/GetSireTag',
            type: 'POST',
            data: 'query=' + query,
            dataType: 'JSON',
                async: true,
                success: function (data) {
                    console.log(data);

                    process(data);
                }

            });
        }

    });

现在我决定通过使用单个 java 脚本代码将类型提前附加到我的所有文本框，使其更具可读性和简短性。

<input data-typeahead-url="/Bull/GetSireTag" id="SireTag" name="SireTag" type="text" value="">

新的 Javascript

 $('*[data-typeahead-url]')
        .each(function () {
            alert(this);
            $(this).typeahead({
                source: function (query, process) {
                    $.ajax({
                        url:  $(this).data("typeahead-url"),
                        type: 'POST',
                        data: 'query=' + query,
                        dataType: 'JSON',
                        async: true,
                        success: function (data) {
                            console.log(data);

                            process(data);
                        }
                    })
                }
            });

        });

但它不工作我对java脚本不是那么精通，现在有什么问题。我试过开发​​者工具ajax请求没有发出。

Answer 1

$('*[data-autocomplete-url]') 不会选择您的元素，因为您使用的是 data-typeahead-url。

Answer 2

您需要return将 ajax 结果发送到source，也不要alert()用于调试，console.log()而是使用：

$('input[data-typeahead-url]').each(function () {
    $(this).typeahead({
        source: function (query, process) {
            return $.ajax({
                url:  $(this).data("typeahead-url"),
                type: 'POST',
                data: { query: query },
                dataType: 'json',
                async: true,
                success: function (resp) {
                    console.log(resp);

                    return process(resp);
                }
            });
        }
    });
});

希望能帮助到你。

Answer 3

$('*[data-typeahead-url]') .each(function () {

 var url = $(this).data("typeahead-url");

 $(this).typeahead({
     source: function (query, process) {
         $.ajax({
             url: url,
             type: 'POST',
             data: 'query=' + query,
             dataType: 'JSON',
             async: true,
             success: function (data) {
                 console.log(data);

                 process(data);
             }
         })
     }
 });

});

问题：代码发出 ajax 请求，但地址相同。诊断：我试过log($(this).data("typeahead-url");) 了，它给出了所需的输出。解决方案：我创建并存储了在 ajax 调用中用作参数的 Url

var url = $(this).data("typeahead-url");

希望这有帮助。