Search jQuery

jQuery Forum

Jquery UI Autocomplete Combobox Reset

in Using jQuery UI • 3 months ago

I'm attempting to modify the demo to suite my needs. However I find it annoying that it doesn't clear the text for the user. I reuse the input field, so when a user clicks on it I'd like it to clear itself.

Also I'm curious if it'd be able to match not just the text field, but the value field. I have different values set for my select options. I'd like the autocomplete to look for both the text and values.

Any guidance, particularly for the reset on focus would be appreciated. I've googled this to death to no avail.

Replies(3)

tehmunk

Re: Jquery UI Autocomplete Combobox Reset

3 months ago

I'm attempting to modify the demo to suite my needs. However I find it annoying that it doesn't clear the text for the user. I reuse the input field, so when a user clicks on it I'd like it to clear itself.

Add the following above your Autocomplete declaration.

$( "#autocomplete" ).focus(function(){$( "#autocomplete" ).val("");});

Also I'm curious if it'd be able to match not just the text field, but the value field. I have different values set for my select options. I'd like the autocomplete to look for both the text and values.

Add the values into your autocomplete select list and/or include them with their text.

- teh munK

jiffywhip

Re: Jquery UI Autocomplete Combobox Reset

3 months ago

Thanks for the reply. Unfortunately no dice.

(function( $ ) {
$.widget( "ui.combobox", {
_create: function() {
var input,
that = this,
wasOpen = false,
select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "",
wrapper = this.wrapper = $( "<span>" )
.addClass( "ui-combobox" )
.insertAfter( select );
function removeIfInvalid( element ) {
var value = $( element ).val(),
matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( value ) + "$", "i" ),
valid = false;
select.children( "option" ).each(function() {
if ( $( this ).text().match( matcher ) ) {
this.selected = valid = true;
return false;
}
});
if ( !valid ) {
// remove invalid value, as it didn't match anything
$( element )
.val( "" )
.attr( "title", value + " didn't match any item" )
.tooltip( "open" );
select.val( "" );
setTimeout(function() {
input.tooltip( "close" ).attr( "title", "" );
}, 2500 );
input.data( "ui-autocomplete" ).term = "";
}
}
input = $( "<input>" )
.appendTo( wrapper )
.val( value )
.attr( "title", "" )
.addClass( "ui-state-default ui-combobox-input" )
.autocomplete({
delay: 0,
minLength: 0,
source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
response( select.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>" ),
value: text,
option: this
};
}) );
},
select: function( event, ui ) {
ui.item.option.selected = true;
that._trigger( "selected", event, {
item: ui.item.option
});
},
change: function( event, ui ) {
if ( !ui.item ) {
removeIfInvalid( this );
}
}
})
.addClass( "ui-widget ui-widget-content ui-corner-left" );
input.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
$( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.tooltip()
.appendTo( wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "ui-corner-right ui-combobox-toggle" )
.mousedown(function() {
wasOpen = input.autocomplete( "widget" ).is( ":visible" );
})
.click(function() {
input.focus();
// close if already visible
if ( wasOpen ) {
return;
}
// pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
});
input.tooltip({
tooltipClass: "ui-state-highlight"
});
},
_destroy: function() {
this.wrapper.remove();
this.element.show();
}
});
})( jQuery );
$( "#autocomplete" ).focus(function(){$( "#autocomplete" ).val("");});
$(function() {
$( "#combobox" ).combobox();
$( "#toggle" ).click(function() {
$( "#combobox" ).toggle();
});
});

mike_laird

Re: Jquery UI Autocomplete Combobox Reset

3 months ago

The jQuery Combobox is very complicated. I don't advise using it unless it suits your needs "off the shelf". Take a look at this Combobox plug-in. It uses options so it is much, much easier to modify. The blank out behavior you want after the user selects can be created as a function in the select: option.

http://jonathan.tang.name/code/jquery_combobox

You'll probably have to write some code to get the features you want, but with this plug-in, you'll have a chance of making it work.

Top Reply

Response title

Attachments

jQuery Forum

Jquery UI Autocomplete Combobox Reset

Replies(3)

Re: Jquery UI Autocomplete Combobox Reset

Re: Jquery UI Autocomplete Combobox Reset

Re: Jquery UI Autocomplete Combobox Reset

Statistics

Tags

Actions

Related Posts