jquery select 英文首字母或字母检索类似百度查询
插件名称：flexselect 下载地址：
demo html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>flexselect tests</title>
<link rel="stylesheet" href="flexselect.css" type="text/css" media="screen" />
<style>
input { width: 400px; }
label, input { display: block; }
label { font-weight: bold; }
input, .flexselect_dropdown li { font-size: 1em; }
small { color: #999; }
.flexselect_selected small { color: #ddd; }
</style>
<script src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script src="liquidmetal.js" type="text/javascript"></script>
<script src="jquery.flexselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select.special-flexselect").flexselect({ hideDropdownOnEmptyInput: true });
$("select.flexselect").flexselect();
$("input:text:enabled:first").focus();
$("form").submit(function() {
alert($(this).serialize());
return false;
});
});
</script>
</head>
<body>
<form>
<label>Pick a Top 100 University or College in North America: <em>(Start typing...)</em></label>
<select class="special-flexselect" id="school" name="school" tabindex="1" data-placeholder="Start typing a school name...">
<option value=""></option>
<option value="1">Massachusetts Institute of Technology</option>
<option value="2">Harvard University</option>
<option value="3">University of California, Berkeley</Option>
<option value="4">University of Michigan</option>
<option value="5">University of Illinois at Urbana-Champaign</option>
<option value="6">Purdue University</option>
<option value="7">University of Wisconsin-Madison</option>
<option value="8">Yale University</option>
<option value="9">Indiana University - System</option>
<option value="10">University of California System</option>
<option value="11">Stanford University</option>
<option value="12">Penn State University</option>
<option value="13">The University of Texas at Austin</option>
<option value="14">University of Washington</option>
<option value="15">University of Pennsylvania</option>
<option value="16">Cornell University</option>
<option value="17">Columbia University in the City of New York</option>
<option value="18">University of California, Los Angeles</option>
<option value="19">University of Minnesota</option>
<option value="20">New York University</option>
<option value="21">University of Florida</option>
<option value="22">University of Virginia</option>
<option value="23">Carnegie Mellon University</option>
<option value="24">Rutgers University - New Brunswick</option>
<option value="25">University of Toronto</option>
<option value="26">University of Maryland</option>
<option value="27">The Ohio State University</option>
<option value="28">Virginia Polytechnic Institute and State University</option>
<option value="29">University of Arizona</option>
<option value="30">University of Southern California</option>
<option value="31">Texas A&M University</option>
<option value="32">Princeton University</option>
<option value="33">University of North Carolina at Chapel Hill</option>
<option value="34">Duke University</option>
<option value="35">North Carolina State University</option>
<option value="36">Michigan State University</option>
<option value="37">University of California, San Diego</option>
<option value="38">University of Chicago</option>
<option value="39">The University of British Columbia</option>
<option value="40">University of California, Irvine</option>
<option value="41">University of California, Davis</option>
<option value="42">Johns Hopkins University</option>
<option value="43">Arizona State University</option>
<option value="44">University of Georgia</option>
<option value="45">Boston University</option>
<option value="46">University of Colorado at Boulder</option>
<option value="47">University of Waterloo</option>
<option value="48">Northwestern University</option>
<option value="49">University of Pittsburgh</option>
<option value="50">York University</option>
<option value="51">Iowa State University of Science and Technology</option>
<option value="52">Georgia Institute of Technology</option>
<option value="53">University of Iowa</option>
<option value="54">McGill University</option>
<option value="55">University of California, Santa Barbara</option>
<option value="56">University of Alberta</option>
<option value="57">University of Oregon</option>
<option value="58">University of Delaware</option>
<option value="59">Université Laval</option>
<option value="60">California Institute of Technology</option>
<option value="61">Oregon State University</option>
<option value="62">University of California, Riverside</option>
<option value="63">University of Illinois at Chicago</option>
<option value="64">University of Nebraska - Lincoln</option>
<option value="65">Drexel University</option>
<option value="66">Simon Fraser University</option>
<option value="67">Rice University</option>
<option value="68">Washington University in St. Louis</option>
<option value="69">Virginia Commonwealth University</option>
<option value="70">Stony Brook University, State University of New York</option>
<option value="71">Brown University</option>
<option value="72">San Diego State University</option>
<option value="73">Georgetown University</option>
<option value="74">Université de Montréal</option>
<option value="75">University of Rochester</option>
<option value="76">Dartmouth College</option>
<option value="77">University of Calgary</option>
<option value="78">University of Victoria</option>
<option value="79">Carleton University</option>
<option value="80">Vanderbilt University</option>
<option value="81">Emory University</option>
<option value="82">University of Notre Dame</option>
<option value="83">Université du Québec à Montréal</option>
<option value="84">The University of Western Ontario</option>
<option value="85">University of California, Santa Cruz</option>
<option value="86">University of California, San Francisco</option>
<option value="87">Auburn University</option>
<option value="88">McMaster University</option>
<option value="89">University of Wisconsin-Milwaukee</option>
<option value="90">Portland State University</option>
<option value="91">Queen's University</option>
<option value="92">University of Guelph</option>
<option value="93">SUNY at Binghamton</option>
<option value="94">Utah State University</option>
<option value="95">The University of Texas at Arlington</option>
<option value="96">Illinois Institute of Technology</option>
<option value="97">Concordia University</option>
<option value="98">Indiana University - Purdue University Indianapolis</option>
<option value="99">California State University, Sacramento</option>
<option value="100">New Jersey Institute of Technology</option>
</select>
<p></p>
<label style="margin: 75px 0 0 400px;">Pick a US President: <em>(Start typing...)</em></label>
<select id="president" class="flexselect" name="president" tabindex="2" style="font-size: 1.5em; 10px; margin: 10px 0 0 400px;">
<option value="1">George Washington</option>
<option value="2">John Adams</option>
<option value="3">Thomas Jefferson</option>
<option value="4">James Madison</option>
<option value="5">James Monroe</option>
<option value="6">John Quincy Adams</option>
<option value="7">Andrew Jackson</option>
<option value="8">Martin Van Buren</option>
<option value="9">William Henry Harrison</option>
<option value="10">John Tyler</option>
<option value="11">James Knox Polk</option>
<option value="12">Zachary Taylor</option>
<option value="13">Millard Fillmore</option>
<option value="14">Franklin Pierce</option>
<option value="15">James Buchanan</option>
<option value="16">Abraham Lincoln</option>
<option value="17">Andrew Johnson</option>
<option value="18">Ulysses S. Grant</option>
<option value="19">Rutherford B. Hayes</option>
<option value="20">James Garfield</option>
<option value="21">Chester Arthur</option>
<option value="22">Grover Cleveland</option>
<option value="23">Benjamin Harrison</option>
<option value="24">Grover Cleveland</option>
<option value="25">William McKinley</option>
<option value="26">Theodore Roosevelt</option>
<option value="27">William Howard Taft</option>
<option value="28">Woodrow Wilson</option>
<option value="29">Warren Harding</option>
<option value="30">Calvin Coolidge</option>
<option value="31">Herbert Hoover</option>
<option value="32">Franklin D. Roosevelt</option>
<option value="33">Harry S Truman</option>
<option value="34">Dwight D. Eisenhower</option>
<option value="35">John F. Kennedy</option>
<option value="36">Lyndon Johnson</option>
<option value="37">Richard Nixon</option>
<option value="38">Gerald Ford</option>
<option value="39">James Carter</option>
<option value="40">Ronald Reagan</option>
<option value="41">George H. W. Bush</option>
<option value="42">William J. Clinton</option>
<option value="43">George W. Bush</option>
<option value="44">Barack H. Obama</option>
</select>
<div style="position:absolute; top:300px; left:100px; z-index:100; text-align:left;">
<div style="position:relative; background-color:#ccc; padding:10px;">
<div style="width:500px; height:100px;">
<select id="animal" name="animal" class="flexselect" tabindex="3" onchange="alert('You changed the animal to ' + $(this).val());">
<option value="angelfish">angelfish</option>
<option value="buffalo">buffalo</option>
<option value="canary">canary</option>
<option value="dinosaur">dinosaur</option>
<option value="eel">eel</option>
<option value="fox">fox</option>
<option value="goldfish">goldfish</option>
<option value="hippo">hippo</option>
<option value="iguana">iguana</option>
<option value="jellyfish">jellyfish</option>
<option value="kangaroo">kangaroo</option>
<option value="llama">llama</option>
<option value="moose">moose</option>
<option value="narwhal">narwhal</option>
<option value="ostrich">ostrich</option>
<option value="pelican">pelican</option>
<option value="quail">quail</option>
<option value="raccoon">raccoon</option>
<option value="snail">snail</option>
<option value="toucan">toucan</option>
<option value="unicorn">unicorn</option>
<option value="vulture">vulture</option>
<option value="wildebeest">wildebeest</option>
<option value="xenopus">xenopus</option>
<option value="yak">yak</option>
<option value="zebra">zebra</option>
</select>
<p>This is an absolute positioned div with an onchange handler on the original select element.</p>
</div>
</div>
</div>
<input type="submit" value="Go" style="margin: 250px auto 0;" tabindex="4"/>
<form>
</body>
</html>
|
flexselect.css css样式:
.flexselect_dropdown {
display: none;
position: absolute;
z-index: 999999;
margin: 0;
padding: 0;
border: 1px solid WindowFrame;
max-height: 200px;
overflow-x: hidden;
overflow-y: auto;
background-color: Window;
color: WindowText;
text-align: left;
box-shadow: 0 6px 12px #ccc;
-webkit-box-shadow: 0 6px 12px #ccc;
}
.flexselect_dropdown ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.flexselect_dropdown li {
margin: 0px;
padding: 2px 5px;
cursor: pointer;
display: block;
width: 100%;
font: Menu;
overflow: hidden;
}
.flexselect_selected {
background-color: Highlight;
color: HighlightText;
}
|
#p#分页标题#e#
jquery.flexselect.js js代码：
//jquery.flexselect.js
/**
* flexselect: a jQuery plugin, version: %RELEASE_VERSION% (%RELEASE_DATE%)
* @requires jQuery v1.3 or later
*
* FlexSelect is a jQuery plugin that makes it easy to convert a select box into
* a Quicksilver-style, autocompleting, flex matching selection tool.
*
* For usage and examples, visit:
* http://rmm5t.github.io/jquery-flexselect/
*
* Licensed under the MIT:
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright (c) 2009-2012, Ryan McGeary (ryan -[at]- mcgeary [*dot*] org)
*/
(function($) {
$.flexselect = function(select, options) { this.init(select, options); };
$.extend($.flexselect.prototype, {
settings: {
allowMismatch: false,
allowMismatchBlank: true, // If "true" a user can backspace such that the value is nothing (even if no blank value was provided in the original criteria)
sortBy: 'score', // 'score' || 'name'
preSelection: true,
hideDropdownOnEmptyInput: false,
selectedClass: "flexselect_selected",
dropdownClass: "flexselect_dropdown",
inputIdTransform: function(id) { return id + "_flexselect"; },
inputNameTransform: function(name) { return; },
dropdownIdTransform: function(id) { return id + "_flexselect_dropdown"; }
},
select: null,
input: null,
dropdown: null,
dropdownList: null,
cache: [],
results: [],
lastAbbreviation: null,
abbreviationBeforeFocus: null,
selectedIndex: 0,
picked: false,
allowMouseMove: true,
dropdownMouseover: false, // Workaround for poor IE behaviors
init: function(select, options) {
this.settings = $.extend({}, this.settings, options);
this.select = $(select);
this.preloadCache();
this.renderControls();
this.wire();
},
preloadCache: function() {
this.cache = this.select.find("option").map(function() {
return { name: $.trim($(this).text()), value: $(this).val(), score: 0.0 };
});
},
renderControls: function() {
var selected = this.settings.preSelection ? this.select.find("option:selected") : null;
this.input = $("<input type='text' autocomplete='off' />").attr({
id: this.settings.inputIdTransform(this.select.attr("id")),
name: this.settings.inputNameTransform(this.select.attr("name")),
accesskey: this.select.attr("accesskey"),
tabindex: this.select.attr("tabindex"),
style: this.select.attr("style"),
placeholder: this.select.attr("data-placeholder")
}).addClass(this.select.attr("class")).val($.trim(selected ? selected.text(): '')).css({
visibility: 'visible'
});
this.dropdown = $("<div></div>").attr({
id: this.settings.dropdownIdTransform(this.select.attr("id"))
}).addClass(this.settings.dropdownClass);
this.dropdownList = $("<ul></ul>");
this.dropdown.append(this.dropdownList);
this.select.after(this.input).hide();
$("body").append(this.dropdown);
},
wire: function() {
var self = this;
this.input.click(function() {
self.lastAbbreviation = null;
self.focus();
});
this.input.mouseup(function(event) {
// This is so Safari selection actually occurs.
event.preventDefault();
});
this.input.focus(function() {
self.abbreviationBeforeFocus = self.input.val();
self.input.select();
if (!self.picked) self.filterResults();
});
this.input.blur(function() {
if (!self.dropdownMouseover) {
self.hide();
if (self.settings.allowMismatchBlank && $.trim($(this).val()) == '')
self.setValue('');
if (!self.settings.allowMismatch && !self.picked)
self.reset();
}
if (self.settings.hideDropdownOnEmptyInput)
self.dropdownList.show();
});
this.dropdownList.mouseover(function(event) {
if (!self.allowMouseMove) {
self.allowMouseMove = true;
return;
}
if (event.target.tagName == "LI") {
var rows = self.dropdown.find("li");
self.markSelected(rows.index($(event.target)));
}
});
this.dropdownList.mouseleave(function() {
self.markSelected(-1);
});
this.dropdownList.mouseup(function(event) {
self.pickSelected();
self.focusAndHide();
});
this.dropdown.mouseover(function(event) {
self.dropdownMouseover = true;
});
this.dropdown.mouseleave(function(event) {
self.dropdownMouseover = false;
});
this.dropdown.mousedown(function(event) {
event.preventDefault();
});
this.input.keyup(function(event) {
switch (event.keyCode) {
case 13: // return
event.preventDefault();
self.pickSelected();
self.focusAndHide();
break;
case 27: // esc
event.preventDefault();
self.reset();
self.focusAndHide();
break;
default:
self.filterResults();
break;
}
if (self.settings.hideDropdownOnEmptyInput){
if(self.input.val() == "")
self.dropdownList.hide();
else
self.dropdownList.show();
}
});
this.input.keydown(function(event) {
switch (event.keyCode) {
case 9: // tab
self.pickSelected();
self.hide();
break;
case 33: // pgup
event.preventDefault();
self.markFirst();
break;
case 34: // pgedown
event.preventDefault();
self.markLast();
break;
case 38: // up
event.preventDefault();
self.moveSelected(-1);
break;
case 40: // down
event.preventDefault();
self.moveSelected(1);
break;
case 13: // return
case 27: // esc
event.preventDefault();
event.stopPropagation();
break;
}
});
var input = this.input;
this.select.change(function () {
input.val($.trim($(this).find('option:selected').text()));
});
},
filterResults: function() {
var abbreviation = this.input.val();
if (abbreviation == this.lastAbbreviation) return;
var results = [];
$.each(this.cache, function() {
this.score = LiquidMetal.score(this.name, abbreviation);
if (this.score > 0.0) results.push(this);
});
this.results = results;
if (this.settings.sortBy == 'score')
this.sortResultsByScore();
else if (this.settings.sortBy == 'name')
this.sortResultsByName();
this.renderDropdown();
this.markFirst();
this.lastAbbreviation = abbreviation;
this.picked = false;
this.allowMouseMove = false;
},
sortResultsByScore: function() {
this.results.sort(function(a, b) { return b.score - a.score; });
},
sortResultsByName: function() {
this.results.sort(function(a, b) { return a.name < b.name ? -1 : (a.name > b.name ? 1 : 0); });
},
renderDropdown: function() {
var dropdownBorderWidth = this.dropdown.outerWidth() - this.dropdown.innerWidth();
var inputOffset = this.input.offset();
this.dropdown.css({
width: (this.input.outerWidth() - dropdownBorderWidth) + "px",
top: (inputOffset.top + this.input.outerHeight()) + "px",
left: inputOffset.left + "px",
maxHeight: ''
});
var html = '';
$.each(this.results, function() {
//html += '<li>' + this.name + ' <small>[' + Math.round(this.score*100)/100 + ']</small></li>';
html += '<li>' + this.name + '</li>';
});
this.dropdownList.html(html);
this.adjustMaxHeight();
this.dropdown.show();
},
adjustMaxHeight: function() {
var maxTop = $(window).height() + $(window).scrollTop() - this.dropdown.outerHeight();
var top = parseInt(this.dropdown.css('top'), 10);
this.dropdown.css('max-height', top > maxTop ? (Math.max(0, maxTop - top + this.dropdown.innerHeight()) + 'px') : '');
},
markSelected: function(n) {
if (n < 0 || n >= this.results.length) return;
var rows = this.dropdown.find("li");
rows.removeClass(this.settings.selectedClass);
this.selectedIndex = n;
var row = $(rows[n]).addClass(this.settings.selectedClass);
var top = row.position().top;
var delta = top + row.outerHeight() - this.dropdown.height();
if (delta > 0) {
this.allowMouseMove = false;
this.dropdown.scrollTop(this.dropdown.scrollTop() + delta);
} else if (top < 0) {
this.allowMouseMove = false;
this.dropdown.scrollTop(Math.max(0, this.dropdown.scrollTop() + top));
}
},
pickSelected: function() {
var selected = this.results[this.selectedIndex];
if (selected) {
this.input.val(selected.name);
this.setValue(selected.value);
this.picked = true;
} else if (this.settings.allowMismatch) {
this.setValue.val("");
} else {
this.reset();
}
},
setValue: function(val) {
if (this.select.val() === val) return;
this.select.val(val).change();
},
hide: function() {
this.dropdown.hide();
this.lastAbbreviation = null;
},
moveSelected: function(n) { this.markSelected(this.selectedIndex+n); },
markFirst: function() { this.markSelected(0); },
markLast: function() { this.markSelected(this.results.length - 1); },
reset: function() { this.input.val(this.abbreviationBeforeFocus); },
focus: function() { this.input.focus(); },
focusAndHide: function() { this.focus(); this.hide(); }
});
$.fn.flexselect = function(options) {
this.each(function() {
if (this.tagName == "SELECT") new $.flexselect(this, options);
});
return this;
};
})(jQuery);
|
#p#分页标题#e#
liquidmetal.js 代码：
/**
liquidmetal.js
* LiquidMetal, version: 1.2.1 (2012-04-21)
*
* A mimetic poly-alloy of Quicksilver's scoring algorithm, essentially
* LiquidMetal.
*
* For usage and examples, visit:
* http://github.com/rmm5t/liquidmetal
*
* Licensed under the MIT:
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright (c) 2009-2012, Ryan McGeary (ryan -[at]- mcgeary [*dot*] org)
*/
var LiquidMetal = (function() {
var SCORE_NO_MATCH = 0.0;
var SCORE_MATCH = 1.0;
var SCORE_TRAILING = 0.8;
var SCORE_TRAILING_BUT_STARTED = 0.9;
var SCORE_BUFFER = 0.85;
var WORD_SEPARATORS = " \t_-";
return {
lastScore: null,
lastScoreArray: null,
score: function(string, abbrev) {
// short circuits
if (abbrev.length === 0) return SCORE_TRAILING;
if (abbrev.length > string.length) return SCORE_NO_MATCH;
// match & score all
var allScores = [];
var search = string.toLowerCase();
abbrev = abbrev.toLowerCase();
this._scoreAll(string, search, abbrev, -1, 0, [], allScores);
// complete miss
if (allScores.length == 0) return 0;
// sum per-character scores into overall scores,
// selecting the maximum score
var maxScore = 0.0, maxArray = [];
for (var i = 0; i < allScores.length; i++) {
var scores = allScores[i];
var scoreSum = 0.0;
for (var j = 0; j < string.length; j++) { scoreSum += scores[j]; }
if (scoreSum > maxScore) {
maxScore = scoreSum;
maxArray = scores;
}
}
// normalize max score by string length
// s. t. the perfect match score = 1
maxScore /= string.length;
// record maximum score & score array, return
this.lastScore = maxScore;
this.lastScoreArray = maxArray;
return maxScore;
},
_scoreAll: function(string, search, abbrev, searchIndex, abbrIndex, scores, allScores) {
// save completed match scores at end of search
if (abbrIndex == abbrev.length) {
// add trailing score for the remainder of the match
var started = (search.charAt(0) == abbrev.charAt(0));
var trailScore = started ? SCORE_TRAILING_BUT_STARTED : SCORE_TRAILING;
fillArray(scores, trailScore, scores.length, string.length);
// save score clone (since reference is persisted in scores)
allScores.push(scores.slice(0));
return;
}
// consume current char to match
var c = abbrev.charAt(abbrIndex);
abbrIndex++;
// cancel match if a character is missing
var index = search.indexOf(c, searchIndex);
if (index == -1) return;
// match all instances of the abbreviaton char
var scoreIndex = searchIndex; // score section to update
while ((index = search.indexOf(c, searchIndex+1)) != -1) {
// score this match according to context
if (isNewWord(string, index)) {
scores[index-1] = 1;
fillArray(scores, SCORE_BUFFER, scoreIndex+1, index-1);
}
else if (isUpperCase(string, index)) {
fillArray(scores, SCORE_BUFFER, scoreIndex+1, index);
}
else {
fillArray(scores, SCORE_NO_MATCH, scoreIndex+1, index);
}
scores[index] = SCORE_MATCH;
// consume matched string and continue search
searchIndex = index;
this._scoreAll(string, search, abbrev, searchIndex, abbrIndex, scores, allScores);
}
}
};
function isUpperCase(string, index) {
var c = string.charAt(index);
return ("A" <= c && c <= "Z");
}
function isNewWord(string, index) {
var c = string.charAt(index-1);
return (WORD_SEPARATORS.indexOf(c) != -1);
}
function fillArray(array, value, from, to) {
for (var i = from; i < to; i++) { array[i] = value; }
return array;
}
})();
|
开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明jquery select 英文首字母或字母检索类似百度查询！
