• About
  • Advertise
  • Privacy & Policy
Blog | Antisoft
  • Home
  • News
No Result
View All Result
  • Home
  • News
No Result
View All Result
Blog | Antisoft
No Result
View All Result
Home Education Programming Languages Jquery

How to change Jquery autocomplete to typehead

admin by admin
February 12, 2018
in Jquery
0
How to change Jquery autocomplete to typehead

How to change Jquery autocomplete to typehead

0
SHARES
33
VIEWS
Share on FacebookShare on Twitter

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>

 

Previous Post

How to give a permission to custom font for IE C#/VB .Net

Next Post

Data Types And Operator In 'C'

admin

admin

Next Post
Data Types And Operator In 'C'

Data Types And Operator In 'C'

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Trending
  • Comments
  • Latest

Kesari 2019 Full Movie Download Hd 480p, 720p , 1080p, 300mb

July 1, 2019
laxmii 2020 Full Movie Download Hd 480p, 720p , 1080p, 300mb

laxmii (2020) Movie 720p Download HD

November 6, 2020
Avengers: Endgame

Avenger Endgame 2019 English Dual Audio Movie 720p Download HD

July 1, 2019
Guddiyan Patole

Guddiyan Patole 2019 Full Movie Download Hd 480p, 720p , 1080p, 300mb

March 8, 2019
laxmii 2020 Full Movie Download Hd 480p, 720p , 1080p, 300mb

laxmii (2020) Movie 720p Download HD

21
How to give a permission to custom font for IE C#/VB .Net

How to give a permission to custom font for IE C#/VB .Net

13
Punjabi Typing Master

Punjabi Typing Master Raavi Font

5
Best Website Company in Muktsar

Best Website Company in Muktsar

5
laxmii 2020 Full Movie Download Hd 480p, 720p , 1080p, 300mb

Laxmii 2020 Full Movie Download Hd 480p, 720p , 1080p, 300mb

November 6, 2020
multi youtube downloader

How to download youtube playlist mp3 and mp4 online

August 21, 2020
Download youtube vidoes

How To Download Youtube Videos In Mobile And Laptop

August 21, 2020
How to Install Windows 7 (Beginners)

Method 2 Upgrading to Windows 7

January 11, 2020

Recent News

laxmii 2020 Full Movie Download Hd 480p, 720p , 1080p, 300mb

Laxmii 2020 Full Movie Download Hd 480p, 720p , 1080p, 300mb

November 6, 2020
multi youtube downloader

How to download youtube playlist mp3 and mp4 online

August 21, 2020
Download youtube vidoes

How To Download Youtube Videos In Mobile And Laptop

August 21, 2020
How to Install Windows 7 (Beginners)

Method 2 Upgrading to Windows 7

January 11, 2020
Movies Solution

We bring you the best Premium WordPress Themes that perfect for news, magazine, personal blog, etc. Check our landing page for details.

Follow Us

Browse by Category

  • Artists
  • battle between India and Pakistan
  • Battle of Saragarhi
  • Best Website Company
  • Bollywood Movies
  • Books
  • C & C++
  • C#
  • Dictionaries
  • Dictionary English to Punjabi
  • Download Youtube Vidoes
  • Education
  • Environment
  • Featured
  • footballers
  • Gadgets
  • Games
  • General Knowledge
  • Health & Fitness
  • Health Tips
  • Hindi Language
  • Hindi Singers
  • Hindi Typing Master
  • History
  • Hollywood
  • Hollywood
  • Jquery
  • Litrature
  • Malayalam
  • Mathematic
  • Microsoft
  • Mobiles
  • Movies
  • Muktsar
  • New Phones
  • Novels
  • Operating System
  • Pakistani Movies
  • Pollywood
  • Programming Languages
  • Punjabi Language
  • Punjabi Typing Master
  • Review
  • Singers
  • Sitecore
  • Software
  • Technology
  • Typing Master
  • Uncategorized
  • Upcoming Movies
  • Upcoming Movies
  • Upcoming Movies
  • VB.Net
  • Votes
  • Window 10
  • Window 7
  • Windows
  • Youtube Playlist Downloader

Recent News

laxmii 2020 Full Movie Download Hd 480p, 720p , 1080p, 300mb

Laxmii 2020 Full Movie Download Hd 480p, 720p , 1080p, 300mb

November 6, 2020
multi youtube downloader

How to download youtube playlist mp3 and mp4 online

August 21, 2020
  • About
  • Advertise
  • Privacy & Policy

© 2019 Antisoft India Technologies

No Result
View All Result

© 2019 Antisoft India Technologies