In Jquery autocomplete combobox if you try to find some content like “S”
result will show all options who contain character “S”. But if you want typed data first then update your Jquery.UI autocomplete code with below code.
<SCRIPT> $( FUNCTION() { $.WIDGET( "CUSTOM.COMBOBOX", { _CREATE: FUNCTION() { THIS.WRAPPER = $( "<SPAN>" ) .ADDCLASS( "CUSTOM-COMBOBOX" ) .INSERTAFTER( THIS.ELEMENT ); THIS.ELEMENT.HIDE(); THIS._CREATEAUTOCOMPLETE(); THIS._CREATESHOWALLBUTTON(); }, _CREATEAUTOCOMPLETE: FUNCTION() { VAR SELECTED = THIS.ELEMENT.CHILDREN( ":SELECTED" ), VALUE = SELECTED.VAL() ? SELECTED.TEXT() : ""; THIS.INPUT = $( "<INPUT>" ) .APPENDTO( THIS.WRAPPER ) .VAL( VALUE ) .ATTR( "TITLE", "" ) .ADDCLASS( "CUSTOM-COMBOBOX-INPUT UI-WIDGET UI-WIDGET-CONTENT UI-STATE-DEFAULT UI-CORNER-LEFT" ) .AUTOCOMPLETE({ DELAY: 0, MINLENGTH: 0, SOURCE: $.PROXY(THIS, "_SOURCE"), APPENDTO: "#"+THIS.ELEMENT.PARENT()[0].ID, SELECT: FUNCTION (EVENT, UI) { VAR ID = UI.ITEM.OPTION.VALUE; $("#" + UI.ITEM.OPTION.PARENTELEMENT.ID + " OPTION").REMOVEATTR("SELECTED"); $("#" + UI.ITEM.OPTION.PARENTELEMENT.ID + " OPTION[VALUE='" + ID + "'").ATTR("SELECTED", TRUE); } }) .TOOLTIP({ CLASSES: { "UI-TOOLTIP": "UI-STATE-HIGHLIGHT" } }); THIS._ON( THIS.INPUT, { AUTOCOMPLETESELECT: FUNCTION( EVENT, UI ) { UI.ITEM.OPTION.SELECTED = TRUE; THIS._TRIGGER( "SELECT", EVENT, { ITEM: UI.ITEM.OPTION }); }, AUTOCOMPLETECHANGE: "_REMOVEIFINVALID" }); }, _CREATESHOWALLBUTTON: FUNCTION() { VAR INPUT = THIS.INPUT, WASOPEN = FALSE; $( "<A>" ) .ATTR( "TABINDEX", -1 ) .ATTR( "TITLE", "SHOW ALL ITEMS" ) .TOOLTIP() .APPENDTO( THIS.WRAPPER ) .BUTTON({ ICONS: { PRIMARY: "UI-ICON-TRIANGLE-1-S" }, TEXT: FALSE }) .REMOVECLASS( "UI-CORNER-ALL" ) .ADDCLASS( "CUSTOM-COMBOBOX-TOGGLE UI-CORNER-RIGHT" ) .ON( "MOUSEDOWN", FUNCTION() { WASOPEN = INPUT.AUTOCOMPLETE( "WIDGET" ).IS( ":VISIBLE" ); }) .ON( "CLICK", FUNCTION() { INPUT.TRIGGER( "FOCUS" ); // CLOSE IF ALREADY VISIBLE IF ( WASOPEN ) { RETURN; } // PASS EMPTY STRING AS VALUE TO SEARCH FOR, DISPLAYING ALL RESULTS INPUT.AUTOCOMPLETE( "SEARCH", "" ); }); }, _SOURCE: FUNCTION (REQUEST, RESPONSE) { VAR MATCHER = NEW REGEXP($.UI.AUTOCOMPLETE.ESCAPEREGEX(REQUEST.TERM), "I"); IF (REQUEST.TERM) { $("#" + THIS.ELEMENT[0].ID + " OPTION").REMOVEATTR("SELECTED"); } RESPONSE(THIS.ELEMENT.CHILDREN("OPTION").MAP(FUNCTION () { VAR TEXT = $(THIS).TEXT(); IF ($(THIS).VAL() && (REQUEST.TERM.TOLOWERCASE() == TEXT.TOLOWERCASE().SUBSTRING(0, REQUEST.TERM.LENGTH))) RETURN { LABEL: TEXT, VALUE: TEXT, OPTION: THIS }; })); }, }, _REMOVEIFINVALID: FUNCTION( EVENT, UI ) { // SELECTED AN ITEM, NOTHING TO DO IF ( UI.ITEM ) { RETURN; } // SEARCH FOR A MATCH (CASE-INSENSITIVE) VAR VALUE = THIS.INPUT.VAL(), VALUELOWERCASE = VALUE.TOLOWERCASE(), VALID = FALSE; THIS.ELEMENT.CHILDREN( "OPTION" ).EACH(FUNCTION() { IF ( $( THIS ).TEXT().TOLOWERCASE() === VALUELOWERCASE ) { THIS.SELECTED = VALID = TRUE; RETURN FALSE; } }); // FOUND A MATCH, NOTHING TO DO IF ( VALID ) { RETURN; } // REMOVE INVALID VALUE THIS.INPUT .VAL( "" ) .ATTR( "TITLE", VALUE + " DIDN'T MATCH ANY ITEM" ) .TOOLTIP( "OPEN" ); THIS.ELEMENT.VAL( "" ); THIS._DELAY(FUNCTION() { THIS.INPUT.TOOLTIP( "CLOSE" ).ATTR( "TITLE", "" ); }, 2500 ); THIS.INPUT.AUTOCOMPLETE( "INSTANCE" ).TERM = ""; }, _DESTROY: FUNCTION() { THIS.WRAPPER.REMOVE(); THIS.ELEMENT.SHOW(); } }); $( "#COMBOBOX" ).COMBOBOX(); $( "#TOGGLE" ).ON( "CLICK", FUNCTION() { $( "#COMBOBOX" ).TOGGLE(); }); } ); </SCRIPT>