Question

我有以下两个脚本：第一个是从输入#search中获取关键字，并使用该关键字的ajax调用的结果填充下拉列表#search-results。

$(document.body).on( 'keyup', '#search', function ( e ) {
//e.preventDefault();

value = $(this).val(); //grab value of input text

  jQuery.ajax({
    url : ajaxsearch.ajax_url,
    type : 'post',
    data : {
      action : 'search_client',
      key : value,
    },
    success : function( response ) {
      response = jQuery.parseJSON(response);
      //console.log(response);
      $.each(result, function(k, v) {
       $('#search-results').append('<li><a href="#">' + v['Name'] + '</a></li>');
      });
    }
  });
});

第二个脚本，抓取单击的下拉结果的值，只执行与第一个脚本相同的操作，这次使用ajax结果来填充页面上的字段。

$(document.body).on('click','#search-results > li', function ( e ) {
//e.preventDefault();

value = $( this ).text(); //grab text inside element

  jQuery.ajax({
    url : ajaxsearch.ajax_url,
    type : 'post',
    data : {
      action : 'search_client',
      key : value,
    },
    success : function( response ) {
      response = jQuery.parseJSON(response);
      //console.log(response);
      $.each(response, function(k, v) {
        $('#clientID').val( v['ClientId'] );
        $('#denumire').val( v['Name'] );
        $('#cui').val( v['CUI'] );
        $('#regcom').val( v['JRegNo'] );
        $('#adresa').val( v['Address'] );
        $('#iban').val( v['IBAN'] );
        $('#banca').val( v['Bank'] );
        $('#telefon').val( v['Phone'] );
        $('#pers-contact').val( v['Contact'] );
      });
    }
  });
});

有没有办法将第二个脚本组合到第一个脚本中，以便不进行第二次ajax调用，但是能够使用第一个ajax调用的结果填充页面上的字段，具体取决于单击的结果。下拉列表？

Answer 1

如果从v['Name']插入到第一个脚本中的列表项中的文本与您希望在第二个脚本中的页面中的其他位置使用完全相同，则可以减少代码方式。毕竟，如果您已经拥有所需的价值，则无需再次搜索它。

//first function, just the relevant bits...
$.each(result, function(k, v) {
    var newItem = $('<li><a href="#">' + v['Name'] + '</a></li>');
    $.data(newItem, "value", v);
    $('#search-results').append(newItem);
});


//second function, the whole thing
$(document.body).on('click','#search-results > li', function ( e ) {
    e.preventDefault();

    var v = $.data($( this ), "value");    //grab object stashed inside element

    $('#clientID').val( v['ClientId'] );
    $('#denumire').val( v['Name'] );
    $('#cui').val( v['CUI'] );
    $('#regcom').val( v['JRegNo'] );
    $('#adresa').val( v['Address'] );
    $('#iban').val( v['IBAN'] );
    $('#banca').val( v['Bank'] );
    $('#telefon').val( v['Phone'] );
    $('#pers-contact').val( v['Contact'] );
});

这应该允许您将整个结果对象存储到列表项中，然后再检索它。如果您在该列表中有一些元素没有用于搜索，那么您还需要做更多工作来获取相关数据。

如何组合两个相似的脚本并使用轻微变化运行

1 个答案: