javascript - 如何仅在 jquery 插件中的当前输入文本框上触发同名类？

Question

你好，我正在创建 ajax 搜索插件。我已经创建了一些动态 div。假设我有两个输入框字段和动态生成的 div 具有相同的名称。所以我只想投影用户在文本框中输入值的那个 div，而不是其他的，但是无论我在第一个还是第二个输入框上键入，它都会在两个 div 上获取结果。HTML

<div class="row" style="padding:10px">
    <div class="col-md-6">
      <input type="text" class="form-control" name="" value="" id="searchText1">

    </div>
    <div class="col-md-6">
      <input type="text" class="form-control" name="" value="" id="searchText2">
    </div>
</div>

js文件

$(document).ready(function(){
  $('#searchText1').typefast({
    hint:true,
    autocomplete:true,

  });
  $('#searchText2').typefast({
    hint:true,
    autocomplete:true,

  });

jquery插件文件

var timeOut = null;
var $current;
var $info;
var input;
var hint;
var comment;

(function( $ ) {

$.fn.typefast = function(a){
  $(this).one('keydown',function(){
  input=$(this);
    $('body').bodyAppend($(this));
    $(this).css({
        'position': 'relative',
        'top': '-34px',
        'background': 'transparent',
        'padding-left': '11px',
        'font-size': '16px'
    })
    $('<div>').attr({
        name: 'comment',
        class: 'comment'
      }).insertAfter($(this));
      comment=$(this);

  })
$(this).on('keydown',function (e) {
    var _this = $(this);

    clearTimeout(timeOut);
      timeOut = setTimeout(function() {
        var m = _this.val();
        api.searchResult(m,e);
        // console.log(ui.input);
        console.log(m);
    },500);

  })
  $.fn.bodyAppend=function(m) {
    $(window).ready(function() {
      $('<input>').attr({
          type: 'text',
          name: 'input1',
          class: 'form-control',
          id:'result',
          placeholder: 'working'
        }).insertBefore(m);
        hint=$('#result')
        single=$('.single')

    })
  }
};

}( jQuery ));

我的问题是，无论页面上输入文本字段的数量如何。我的评论应该只指向我正在工作的当前输入框。它不应该更新其他评论字段class single是显示ajax请求结果的字段。这样做的最佳方法是什么？

Answer 1

对于这种情况，您可以为所有输入字段设置一个公共(public)类，并将焦点事件上的 typefast 函数应用于该类。

例如，HTML代码

<div class="col-md-6">
                <input type="text" class="form-control searchtext" name="" value="" >
            </div>
<div class="col-md-6">
                <input type="text" class="form-control searchtext" name="" value="" >
            </div>

Javascript 代码，

$(document).ready(function () {
                $(document).on("focus", ".searchtext", function () {
                    $($(this)).typefast({
                        hint: true,
                        autocomplete: true,
                    });
                });
            });