CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-autocomplete
Jonathan Stegall
Jonathan Stegall

Reputation: 530

jQuery UI Autocomplete on keyup?

I'm working with the jQuery UI library's autocomplete functionality. I have two form fields on a webpage - one is internal search, and one searches content my company manages on a third party site via a REST API.

This works as it should - if I have the two form fields sitting next to each other, I can type into either and get the autocomplete results for that datasource below.

What I've been asked to do, though, is combine the two fields into one "master" search field and hide the two individual fields. It would search both data sources for the user's input, and display the results in separate ui-autocomplete boxes below the field.

My idea is that if I could just change the trigger method for autocomplete from "focus" to "keyup" it would work very nicely, or if I could "fake" the focus trigger without sending the cursor to the hidden field.

Any ideas on this?

Update:

Here's the code I've been trying, and it doesn't work. This is what lead me to think I was dependent on the focus event.

$(function(){
// run autocomplete on form fields
searchAutocomplete('/support/results_json/','#keywords');
searchAutocomplete('/support/zdresults_json/','#zd_search');
//$('#ee_searchform').hide(); // will need this later
//$('#zd_searchform').hide(); // will need this later
$('<form id="support_search" class="group" method=""><fieldset><legend>Search Support</legend><ol><li><label for="support_keywords">Keywords</label><input type="search" value="" name="support_keywords" id="support_keywords" /></li><li class="submit"><input type="submit" name="support_submit" id="support_submit" value="Search" /></li></ol></form>').insertAfter('#zd_searchform');

$('#support_keywords').keyup(function() {
  var value = $('#support_keywords').val();
    $('#keywords').val(value);
    $('#keywords').keyup();
}); 
});

So you can see, I take the two form fields that the HTML contains, and make sure they call the working autocomplete function. Then I use jQuery to add another form to the DOM, and when it gets a keyup it adds its contents to one of the other fields, and gives that field a keyup. This doesn't call the autocomplete, though.

Many thanks.

Upvotes: 0

Views: 7681

Answers (1)

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

My first thought here is to hide the original fields (on focus if you want) and inject a new one prior to or in combination with the individual focus events then suggest you manage the autocomplete source:

source: function(request, response)
    {
        // do both your ajax calls here and combine your results prior to providing to your field
    }

THEN, you can handle the results using some combination of:

source: function(request, response)
            {response(rows);},//where rows is an array of results
search:function(event, ui){},
focus:function(event, ui){},
open:function(event, ui){},

and finally

select: function(event, ui)
            {}//handle what to do with the selection of/from the results list

This would help avoid any fancy/complicated management of entry state and you can then manage the results presentation.

EDIT: Example of multiple ajax concats (very simple and no sorting etc)

See this fiddle page for some stuff (does not run as-is due to the json ajax not being present but you can work with it I hope) http://jsfiddle.net/MarkSchultheiss/Z6rVE/

As written, it assumes a json with MyCode, Description, and SourceTable

[{"MyCode":"code","Description":"my desc","SourceTable":"mysource"},{"MyCode":"code","Description":"my desc","SourceTable":"mysource"}]

you just need each source to say the SourceTable (or add new stuff you might need)

Upvotes: 0

Related Questions