joshaven / jSelect
- Source
- Commits
- Network (1)
- Issues (0)
- Downloads (0)
- Wiki (1)
- Graphs
-
Branch:
master
JavaScript implementation of <select>...</select> similar to jQuery.quickselect (depends upon jQuery)
| name | age | message | |
|---|---|---|---|
 |
LICENSE.txt | Loading commit data...  |
|
| |
README.textile | ||
| |
jquery-1.3.2.min.js | ||
| |
jselect.1.1a.js | ||
| |
string_score_min.js | ||
 |
test/ |
This version is not yet ready for use (getting close though). This is still under heavy development. Please check back, this notice will be removed when the project is ready for public use.
Experience
A jSelect is a text input box that will drop down a list of options as you type and sort them based upon the text you provide. The drive behind the creation of jSelect is the awkwardness of keyboard data input when using select box. There is no time limitation when typing consecutive text nor do you have to match the beginning or consecutive lettering. A jSelect can match “Michigan State University” by typing “MSU” as well as allowing you to click to choose like a standard select. A select box can be converted into a jSelect simply by calling the jQuery function named jselect on the select.
Example
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jselect.1.1a.js"></script>
<script type="text/javascript" src="string_score_min.js"></script>
</head>
<body>
<select id="example1"> <option>one</option> <option>two</option> </select>
<script type="text/javascript"> $('example1').jselect(function(){alert('You selected: ' + this.value)}); </script>
</body>
API Overview
| Object | Description |
| $().jselect(callback) | jQuery function to convert a select element into a jSelect |
| jSelect(domObject, callback) | JavaScript abstraction object depicting a select element, contains jOptions |
| jOptions(domObject) | JavaScript abstraction object depicting a set of option elements, each being a jElement |
| jElement(domObject) | JavaScript abstraction object depicting any element. |
Objects & Privileged Methods
$().jselect(callback) Privileged Methods
No direct methods, it simply returns a jQuery Array containing jselected input elements.
$(‘#my_select’).jselect(); is the same as new jSelect($(‘#my_select’));
“this” from within the callback will be the dom Object… (ie, “this” would be equal: jQuery('#name_jselect').get(0);)
jSelect(domObject, callback)
| method | Description | |
| .changeSelection(instruction) | Whereas instruction equals “next”, “previous”, or an exact string match to the desired option. | |
| .option(index) | Returns jOption object at specified index in jOptions internal Array | .options(jOptions) |
Returns or assigns a jOptions object which is essentially like an array of jElements |
| .options.areVisable() | Returns true or false depending upon the existence of the options dropdown | |
| .options.hide() | Hides the dropdown select box emulation. | |
| .options.push(el) | Appends the jOptions with the given element stored in a jElement object. | |
| .options.show(list) | Shows the dropdown select box emulation. List is optional, string like: "<ol><li>...</li></ol>" |
|
| .options.toArray() | Returns an Array of the innerHTML of each option… ( ie: [‘’,’red’,‘green’,‘blue’] ) | |
| .options.sortedBy(term) | Returns the options Array sorted by the supplied term | |
| .render() | Renders an jSelect’s html text input box. | |
| .selectedIndex() | Returns the options array index for the selected item | |
| .toString() | String representation of Object |
jOptions(domObject)
| method | Description |
| .each(callback) | An iterator for the internal options. ie: js.options().each( function(){ alert(this.innerHTML()) } ); |
| .elements() | Returns an Array of the associated jElements |
| .fromSelect(select) | Imports data from an existing select element |
| .push(option) | Appends & returns the internal options array, expects a jElement Object. Returns false if not given a jElement. |
| .sortedBy(term) | Sort each option of jOptions by the proximity to the term supplied… ie: (red, green, blue) sorted by ‘gre’ will return (green, red, blue) |
| .toString() | Returns an String representation of an array of jElement objects |
| .itemsFromOptions() | Returns an array of strings representing the innerHTML of the original options given: "<option>one</option>", the result of itemsFromOptiosn() would be [‘one’] |
| .toList() | Returns li elements (ie: "<li>red</li><li>green</li><li>blue</li>") |
jElement(domObject)
| method | Description |
| .toString() | String representation of the jElement object |
| .position() | Returns an object containing .width, .height, .top, & .left |
| .tagName() | Returns the tagName given: "<select></select>", the result would be “SELECT”. |
| .innerHTML() | Returns the inner HTML. given: "<option>Hello World</option>", the result would be “Hello World” |
| .attributes() | Returns an object containing the html element attributes as well as a toString() method. given: "<select id='one' class='small'></select>" the result would be {id:‘one’, class:’small’} |
| .eachAttribute(callback) | runs callback on each attribute. ie: .eachAttribute( function(k,v){ alert(‘key:’ + k + ‘value:’ + v) } ) |
