Question

尝试通过在输入字段中键入来搜索json时遇到问题。它仅适用于一个字段，当我选择结果时，它会附加到所有字段。

我添加新行：

 $( '#add-row' ).on('click', function() {
            var row = $( '.empty-row.screen-reader-text' ).clone(true);
            row.removeClass( 'empty-row screen-reader-text' );
            row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
            return false;
        });

 $( '.remove-row' ).on('click', function() {
        $(this).parents('tr').remove();
        return false;
 });

我的HTML结构：

     <?php
    if ( $repeatable_fields ) :
        foreach ( $repeatable_fields as $field ) { ?>
            <tr>
                <td>
                    <input class="searchterm" type="text" class="widefat" name="name[]" value="existing value" />
                </td>
                <td><a class="button remove-row" href="#">Remove</a></td>

            </tr>
            <?php
        }
        else :
        //show a blank one
        ?>
        <tr>
            <td>
                <input  class="searchterm" type="text" class="widefat" name="name[]" />
            </td>
            <td><a class="button remove-row" href="#">Remove</a></td>
        </tr>
    <?php endif; ?>

    <!-- empty hidden one for jQuery -->
    <tr class="empty-row screen-reader-text">
        <td>
            <input class="searchterm"  type="text" class="widefat" name="name[]" />
        </td>
        <td><a class="button remove-row" href="#">Remove</a></td>
    </tr>

这样可以正常工作，但是如果我有很少的字段，它会用相同的值填充所有字段。我知道我将 .val 设置为所有 .searchterm 元素。但我无法理解如何管理它......

我需要输入每个输入来获得新结果，并在选择结果时填写该字段。

jQuery(document).ready(function(){

      jQuery(".searchterm").live('keyup', function(e) {
        var q = jQuery('.searchterm').val();
        var regex = new RegExp(q, "i");

        jQuery.getJSON("s_json.json",
        {
          srsearch: regex,
          action: "query",
          list: "search",
          format: "json"
      },
      function(data) {
        jQuery("#results").empty();
        jQuery("#results").append("Results for <b>" + q + "</b>");
        //console.log(data);

        jQuery.each(data, function(i,item){
         if ((item.name.search(regex) != -1) || (item.ticker.search(regex) != -1)) {
             //console.log(item);
             jQuery("#results").append('<a class="result" data-value="' + item.ticker + '">' + item.ticker + ' / ' + item.name + '<a>');
         }
     });
    });
    });

      jQuery( '#results a' ).live('click', function() {
       var value = jQuery(this).attr("data-value");
       var input = jQuery('.searchterm');
       input.val(value);
       jQuery("#results").empty();
       return false;
   });


  });

Answer 1

我看到的快速解决方法是将当前".searchterm"项存储在变量中：

jQuery(document).ready(function(){

    var curSearchItem = null;

    jQuery(".searchterm").live('keyup', function(e) {
        var q = jQuery('.searchterm').val();
        var regex = new RegExp(q, "i");

        // here, you store your item here
        curSearchItem = jQuery( this );

        // other code unchanged

    });

    jQuery( '#results a' ).live('click', function() {
       var value = jQuery(this).attr("data-value");
       // instead of `input` - use `curSearchItem`
       if (curSearchItem) {
           curSearchItem.val(value);
           jQuery("#results").empty();
       }
       return false;
    });
});

更复杂的选项可以为每个.searchitem分配ID并存储此id，但它会为您的.searchitem创建更多属性，但仍然逻辑相同 - 通过存储{查找项目{1}}。所以，我认为存储id本身更简单。

Answer 2

使用 u_mulder 帮助我添加了一个“焦点”的技巧

结果如下：

     $('body').on('focus',".searchterm", function(){
        var curSearchItem = null;
        jQuery(this).live('keyup', function(e) {
          var q = jQuery(this).val();
          var regex = new RegExp(q, "i");
          curSearchItem = jQuery( this );
          jQuery.getJSON("s_json.json",
          {
            srsearch: regex,
            action: "query",
            list: "search",
            format: "json"
          },
          function(data) {
            jQuery("#results").empty();
            jQuery("#results").append("Results for <b>" + q + "</b>");

            jQuery.each(data, function(i,item){
             if ((item.name.search(regex) != -1) || (item.ticker.search(regex) != -1)) {
               jQuery("#results").append('<a class="resul" data-value="' + item.ticker + '">' + item.ticker + ' / ' + item.name + '<a>');
             }
           });
          });
        });
        jQuery( '#results a' ).live('click', function() {
         var value = jQuery(this).attr("data-value");
         if (curSearchItem) {
           curSearchItem.val(value);
           jQuery("#results").empty();
         }
         curSearchItem = null;
         return false;

       });
      });

使用动态DOM通过keyup将.val添加到右侧输入

2 个答案: