Search jQuery

jQuery Forum

Using named functions for jQuery UI widget event function callbacks and option function callbacks

in Using jQuery UI • 3 months ago

I know I've seen this somewhere, but I can't seem to find the right answer now, and my own knowledge is too fuzzy to get a clear answer on this one.

I have a number of jQuery UI autocompletes applied to a number of fields in a big form.

Instead of using an anonymous function for each of the "source" option function callbacks and "open" event function callbacks, I would like to use one named function that I can re-use for all of the "source" option function callbacks, and another named function that I can re-use for all of the "open" event function callbacks.

My question is, how are these functions to be called?

How are the parameters to be passed back and forth?

How are we to refer to "$(this)" in the named function?

Here is an example:

<script type="text/javascript">
var autocompleteOpen = function(event,ui){
/*--- This function provides no hooks to the results list, so we have to trust the
selector, for now.
*/
var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a");
var srchTerm = $.trim( $(this).val() ).split(/\s+/).join('|');
//--- Loop through the results list and highlight the terms.
resultsList.each(function(){
var jThis = $(this);
var regX = new RegExp('(' + srchTerm + ')', "ig");
var oldTxt = jThis.text();
jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>') );
});
$(this).autocomplete("widget").css({
"width": 250
});
}
$(document).ready(function(){
$('#complex_input').autocomplete({
source: function(request, response) {
queryval = $(this).attr('id');
$.getJSON('/path_to_phpquery/query_autocomplete.php?query='+queryval, request, function(data, status, xhr ) {
var newmatchArry = new Array();
var matchArry = data.slice();
var srchTerms = $.trim(request.term).split(/\s+/);
//--- For each search term, remove non-matches.
$.each(srchTerms, function(J, term){
var regX = new RegExp(term.value, "i");
matchArry = $.map(matchArry, function(item){
return regX.test(item) ? item : null;
});
});
response(matchArry);
});
},
open: autocompleteOpen,
minLength: 0,
select: function(event, ui) {
updatedfield( $('input#complex_query').attr('name'),original_field_values );
},
sortResults:false
});
});
</script>

What is the correct way to use a named function for the "open" event callback? What is the correct way to capture the "event" and "ui" parameters, and the correct way to refer to "$(this)"?

And how would I go about doing the same for the "source" option function callback?

And how would I go about doing the same for the "select" event function callback?

John R. D'Orazio

Replies(3)

Lwangaman

Re: Using named functions for jQuery UI widget event function callbacks and option function callbacks

3 months ago

Well I'm not sure why but some of the errors seem to have disappeared on their own, and I found the answers to most of the rest, but I do still have on question.

I see the parameters are being passed in just fine, and I see I can get a reference to the original element that autocomplete is being called on simply as "this" for the "open" event callback (and here it's a dom element, so $(this) will be the jquery object), and as "this.element" for the "source" option callback (and here it's already a jquery object).

Only question left now, is how I can send an additional parameter to the "select" event callback?

I have a variable that contains an array of information (let's call it "precious_info"), which I would like to send into the select event callback... The array is not a global variable, it is defined within the function that is constructing all of the autocomplete widgets. So this variable was available while I was using an anonymous function callback directly within the autocomplete. But if I use a named function for the select event callback, the named function is now out of the context of the main function and I no longer have access to my array variable... I would need to pass it into the select event callback function as an extra parameter I guess. How can I do that?

So here's my semi-final code...

function autocompleteOpen(event,ui){
/*--- This function provides no hooks to the results list, so we have to trust the
selector, for now.
*/
var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a");
var srchTerm = $.trim( $(this).val() ).split(/\s+/).join('|');
//--- Loop through the results list and highlight the terms.
resultsList.each(function(){
var jThis = $(this);
var regX = new RegExp('(' + srchTerm + ')', "ig");
var oldTxt = jThis.text();
jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>') );
});
$(this).autocomplete("widget").css({
"width": 250
});
}
/* -------------------------------------------------*/
function autocompleteSource(request,response){
var el = this.element;
$.getJSON('/schedario/ajax/query_autocomplete.php?query='+el.attr('name'), request, function(data, status, xhr ) {
var newmatchArry = new Array();
var matchArry = data.slice();
var srchTerms = $.trim(request.term).split(/\s+/);
//--- For each search term, remove non-matches.
$.each(srchTerms, function(J, term){
var regX = new RegExp(term.value, "i");
matchArry = $.map(matchArry, function(item){
return regX.test(item) ? item : null;
});
});
response(matchArry);
});
}
function autocompleteSelect(event,ui) {
checkinfo( $(this).attr('name'),precious_info );
}
function checkinfo( name,info ){
/* function that does a lot of dandy checks against the "info" array */
}
function buildAutocompletes(){
var precious_info = new Array();
/*
(...here code the builds the "precious_info" array...)
*/
$('#complex_input').autocomplete({
source: autocompleteSource,
open: autocompleteOpen,
minLength: 0,
select: autocompleteSelect, // how do I pass the "precious_info" array to my "autocompleteSelect" function ?
sortResults:false
});
}

John R. D'Orazio

Lwangaman

Re: Using named functions for jQuery UI widget event function callbacks and option function callbacks

3 months ago

I seem to have found the answer to my last question also, with jQuery's "$.proxy()" method.

function autocompleteOpen(event,ui){
var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a");
var srchTerm = $.trim( $(this).val() ).split(/\s+/).join('|');
//--- Loop through the results list and highlight the terms.
resultsList.each(function(){
var jThis = $(this);
var regX = new RegExp('(' + srchTerm + ')', "ig");
var oldTxt = jThis.text();
jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>') );
});
$(this).autocomplete("widget").css({
"width": 250
});
}
/* -------------------------------------------------*/
function autocompleteSource(request,response){
var el = this.element;
$.getJSON('/schedario/ajax/query_autocomplete.php?query='+el.attr('name'), request, function(data, status, xhr ) {
var newmatchArry = new Array();
var matchArry = data.slice();
var srchTerms = $.trim(request.term).split(/\s+/);
//--- For each search term, remove non-matches.
$.each(srchTerms, function(J, term){
var regX = new RegExp(term.value, "i");
matchArry = $.map(matchArry, function(item){
return regX.test(item) ? item : null;
});
});
response(matchArry);
});
}
function autocompleteSelect(infoarray,event,ui) {
checkinfo( $(this).attr('name'),infoarray );
}
function checkinfo( name,info ){
/* function that does a lot of dandy checks against the "info" array */
}
function buildAutocompletes(){
var precious_info = new Array();
/* (...here code the builds the "precious_info" array...) */
$('#complex_input').autocomplete({
source: autocompleteSource,
open: autocompleteOpen,
minLength: 0,
select: $.proxy(autocompleteSelect,this,precious_info),
sortResults:false
});
}

John R. D'Orazio

mike_laird

Re: Using named functions for jQuery UI widget event function callbacks and option function callbacks

3 months ago

Thanks for posting your progress and solution. This will be very helpful.

Top Reply

Response title

Attachments

jQuery Forum

Using named functions for jQuery UI widget event function callbacks and option function callbacks

Replies(3)

Re: Using named functions for jQuery UI widget event function callbacks and option function callbacks

Re: Using named functions for jQuery UI widget event function callbacks and option function callbacks

Re: Using named functions for jQuery UI widget event function callbacks and option function callbacks

Statistics

Tags

Actions

Related Posts