How to change Jquery autocomplete to typehead

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>