Question

如何进行简短的JS编码呢？我想用Ajax编写value和data-sutun的结果。

<input autocomplete="off"
       data-sutun="namedata"
       type="text"
       id="form-name"
       name="gonkod"
       class="form-control input-data typeahead" />

<input autocomplete="off"
       data-sutun="countrydata"
       type="text"
       id="form-country"
       name="gonkod"
       class="form-control input-data typeaheadtwo" />

$( document ).ready(function() {
  $('input.typeahead').typeahead({
    source: function (query, process) {
      var verim = $('#form-name').data('sutun');

      return $.post("{{ URL }}{{ dil }}/ajax/autogkod", { query: query, verim :verim }, function (data) {
        data = $.parseJSON(data);
        return process(data);
      });
    },
    showHintOnFocus:'all'
  });
});

$( document ).ready(function() {
  $('input.typeaheatow').typeahead({
    source: function (query, process) {
      var verim = $('#form-country').data('sutun');

      return $.post("{{ URL }}{{ dil }}/ajax/autogkod", { query: query, verim :verim }, function (data) {
        data = $.parseJSON(data);
        return process(data);
      });
    },
    showHintOnFocus:'all'
  });
});

Answer 1

每当您需要将元素特定数据传递到插件的各个实例时，请使用each循环，以便您可以each中的this访问元素实例

$('#form-name, #form-country').each(function(){
   var $input = $(this),
        // store verim here since `this` might be different in source callback
        verim = $input.data('sutun');

   $input.typeahead({
       .....

})

Answer 2

如果两个输入的{{ URL }}不同......

在每个数据属性中都有{{ URL }}。

<input autocomplete="off"
       data-sutun="namedata"
       data-url="{{ URL }}{{ dil }}/ajax/autogkod"
       type="text"
       id="form-name"
       name="gonkod"
       class="form-control input-data typeahead" />

<input autocomplete="off"
       data-sutun="countrydata"
       data-url="{{ URL }}{{ dil }}/ajax/autogkod"
       type="text"
       id="form-country"
       name="gonkod"
       class="form-control input-data typeaheadtwo" />

然后，在typeahead实例化中，使用$(this).data("url")。

$( document ).ready(function() {
  $('input.typeahead, input.typeaheadtwo').typeahead({
    source: function (query, process) {
      var verim = $('#form-name').data('sutun');

      return $.post($(this).data("url"), { query: query, verim :verim }, function (data) {
        data = $.parseJSON(data);
        return process(data);
      });
    },
    showHintOnFocus:'all'
  });
});

请注意，您可以拥有多个选择器...您可以像下面这样将它们分开：$('input.typeahead, input.typeaheatwo')

如何使用Ajax使用2个输入调用2个不同的URL

2 个答案: