Home > selectSearch

selectSearch

SelectSearch is a project mainly written in JavaScript, it's free.

jQuery plug-in to allow users to limit options in select list

////////////////////////////////INFO//////////////////////////////////////// // This library was created by Kim Doberstein

// Version 1.2.2 // Date: 08/23/2010 // //This jQuery plug-in allows a select list to be narrowed down by a text input box.

// NOTE: These functions require the jQuery library. It was created using version 1.2.6 // You can downloaded jQuery at: http://jquery.com/ ////////////////////////////////////////////////////////////////////////////

///////////////////////////////// HOW TO USE THESE FUNCTIONS ///////////////////////// // In most cases, you call the selectSearch to a table object using jQuery "daisy-chaining"

// Example : $('#mySelectList').selectSearch(searchBoxObj);

// Where searchBoxObj, is a jQuery pointer to the search box the user types in their search string to narrow down the select menu

// If you need to tweek how the selectSearch method is applied, you can add any of the following options: // { // selectLast:true/false, // If there is only one option left, should it be selected // startSearchFromFront:true/false, //Shoudld the search begin matching at the start of the option text // sortOptions:true/false, //Should the options be sorted // sortOptGroups:true/false, //Shoudl the optgroups be sorted // showEmptyOptGroup:true/false, //If there are any optgroups that do not have any options, should the optgroup label show // fixedWidth:true/false, //Should the select list have a fixed width // }

// Example: $('#mySelectList').selectSearch(searchBoxObj,{selectLast:false,startSearchFromFront:false});

//////////////////////////////////////////////////////////////////////////////////

////////////////////////////////// GENERAL TIPS FOR SETTING UP YOUR SELECT LIST ///////////

// All optgroups should have a non-empty label // All option items should have a value attribute set

//////////////////////////////////////////////////////////////////////////////////

//////////////////////////////// ADDING AN OPTION ////////////////////// //Because of how this library is constructed, you cannot directly add an option via the DOM. //You must call the selectSearch_addOption method and apply it the select list // //Example: $('#mySelectList').selectSearch_addOption(itemText,itemValue,optGroupLabel) // //Where: // itemText - the display text of the option // itemValue - the value of the value attribute of the option // optGroupLabel - the label of the optgroup this item should be under. If it shouldn't be in an optgroup, use ""

// If you need to tweek how the selectSearch_addOption method is applied, you can add any of the following options: // { // selectLast:true/false, // If there is only one option left, should it be selected // sortOptions:true/false, //Should the options be sorted // sortOptGroups:true/false, //Shoudl the optgroups be sorted // showEmptyOptGroup:true/false, //If there are any optgroups that do not have any options, should the optgroup label show

// }

// Example: jQuery('#mySelectList').selectSearch_addOption(itemText,itemValue,optGroupLabel,{selectLast:false,sortOptGroups:false});

//////////////////////////////////////////////////////////////////////////////////

//////////////////////////////// REMOVING AN OPTION ////////////////////// //Because of how this library is constructed, you cannot directly remove an option via the DOM. //You must call the selectSearch_removeOption method and apply it the select list // //Example: jQuery('#mySelectList').selectSearch_removeOption(itemText,itemValue,optGroupLabel) // //Where: // itemText - the display text of the option // itemValue - the value of the value attribute of the option // optGroupLabel - the label of the optgroup this item should be under. If it isn't in an optgroup, use ""

// NOTE currently you MUST provide all three arguments. This method will only rmeove the first matched option

//////////////////////////////////////////////////////////////////////////////////

//////////////////////////////// HOW THIS LIBRARY WORKS ////////////////////// //When the selectSearch method is called, all the options in the select list are stored in a large array. //When the user types a charachter into the search box, this library emptys all the options in the select list, //goes through the array and adds matching array entries to a temporary array, and then the temporary array //is used to re-construct the options in the select list. // //One's first response to just hide/show option items in the select list that match wat was entered into the searchbox. //While this works well in Firefox, other browsers including IE and Safari do not allow you to hide an option tag.

//////////////////////////////////////////////////////////////////////////////////

/////////////////////////////// CHANGES TO 1.2.2 ///////////////////////////////// // Fix a bug where the script fails when a special character was entered in the search box // Select item(s) were selected on page load // Select item(s) that were selected by the user // Increased performance of the code that tracks what item has been selected // Allow ability to change search type on the fly

/////////////////////////////// KNOWN ISSUES / TO-DOS /////////////////////////////////

// The script should reload the options when there is a switch in search type (aka from front or anywhere). // The script fails when the following are entered in the searchbox: . ^ $

Previous:gitplayground