2015-09-01 25 views
0

我有以下两个脚本: 第一个从输入#搜索关键字抓取并填充下拉#search-results以及来自ajax调用的结果为该关键字。如何合并两个类似的脚本并稍微变化运行

$(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调用的结果来填充页面上的字段点击结果在下拉列表中?

回答

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']); 
}); 

这应该让您将整个结果对象存储到列表项中,然后再检索它。如果您在该列表中包含某些元素,而您没有使用搜索功能,则还需要做更多工作才能获取相关数据。

+0

ajax调用使用推算值进行sql查询并返回更多参数。我只是简化了代码,所以更容易理解。 – CiprianD

+0

当然,这是有道理的。但是,您插入到下拉菜单中的字符串是否与要插入页面其他位置的字符串相同? –

+0

是的,但现在看第二个脚本,我已经更新了,所以你可以看到有更多的元素需要在页面上更新。下拉结果可用作实时搜索,这就是为什么重要结果中点击哪些元素的原因。 – CiprianD