Title: How to combine two similar scripts and run it with slight variations
Tags: javascript;jquery;ajax
Question: I have the following two scripts:
The first one, on grabs a keyword from input#search and populates a dropdown#search-results with the results from the ajax call for that keyword.
$(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&gt;<a href="#"&gt;' + v['Name'] + '</a&gt;</li&gt;');
});
The second script, grabs the value of the clicked dropdown result, does the same action as the first script only this time the ajax result is used to populate fields located on the page.
$(document.body).on('click','#search-results &gt; 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'] );
});
Is there a way to combine the second script into the first one so not to make the second ajax call, but be able to populate the fields on the page with the results from the first ajax call depending on the clicked result in the dropdown list?

Here is the accepted answer: If the text you insert from v['Name'] into the list item in the first script is the exact same thing you want to use elsewhere in the page in the second script, you can reduce the code way, way down.  After all, if you already have the value you want, there's no need to go search for it again.
//first function, just the relevant bits...
$.each(result, function(k, v) {
var newItem = $('<li&gt;<a href="#"&gt;' + v['Name'] + '</a&gt;</li&gt;');
$.data(newItem, "value", v);
$('#search-results').append(newItem);
//second function, the whole thing
$(document.body).on('click','#search-results &gt; 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'] );
This should let you store the entire result object into the list item, then retrieve it later.  If you have some elements in that list that you're not putting there with searches, you'll have to do some more work to get their relevant data too.
Comment for this answer: The ajax call makes an sql query with the imputed value and returns a lot more parameters. I just slimmed down the code here so it's easier to understand.
Comment for this answer: Yes, but look at the second script now, I have updated so you can see that there are many more elements that need to be updated on the page. The dropdown result works as a live search, that's why it matters which elements is clicked in the results.
Comment for this answer: Unfortunately it's not working. The idea is great, but the data just doesn't gets attached.
Comment for this answer: In the end I went with your idea, but hard-coded the data in the appended element.
Comment for this answer: Sure, that makes sense.  But is the string you insert into the dropdown menu the same string you want inserted elsewhere in the page?
Comment for this answer: In that case, you could attach the relevant object to the list item with the .data() method.  You'd then retrieve it (also with .data()) and use the parameters of the object to populate the page.  I'll try to put some code together.
Comment for this answer: This should be more useful now, as it stashes the entire result for your later use.  Please note - this is a best effort without actually running/testing the code.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:09/01/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><ajax>', 'Title': 'How to combine two similar scripts and run it with slight variations', 'ViewCount': 69, 'id': 32339396, 'user_AboutMe': '', 'user_AccountId': 4538834.0, 'user_DisplayName': 'CiprianD', 'user_Reputation': 492.0, 'user_Views': 23.0, 'user_id': 3687283.0}}