自動完成 類似 autocomplete 但又不像他這麼複雜
JQuery 就是要簡潔有力 好使用!! 推薦大家使用
這個我找了很久。
在台灣真的IT分享的文章很有限，都是跟強國找來的!
不然就要去找原文版的看，小弟我英文不太好 所以只能投靠強國分享的!
必要匯入
jquery.min.js or jquery.js
flexselect.css
liquidmetal.js
jquery.flexselect.js
參考網站:
http://www.jqcool.net/jquery-chosen.html
http://www.jqcool.net/jquery-flexselect.html
需要匯入之*.js 及 *.css 請去 上面兩個網站下載。
最笨的方法就是用chrome預覽程式碼 點擊他匯入的檔案下載至電腦。
以下是我的原始碼原封不動!
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<style type="text/css">@import URL("style.css")</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- 以下是必要匯入 -->
<link rel="stylesheet" href="<%=session.getAttribute("basePath")%>css/flexselect/flexselect.css" type="text/css" media="screen" />
<script src="<%=session.getAttribute("basePath")%>css/flexselect/liquidmetal.js" type="text/javascript"></script>
<script src="<%=session.getAttribute("basePath")%>css/flexselect/jquery.flexselect.js" type="text/javascript"></script>
<!-- ------------- -->
<script type="text/javascript">
$(document).ready(function() {
$("select.special-flexselect").flexselect({
hideDropdownOnEmptyInput: true
});
//$("input:text:enabled:first").focus();
});
</script>
<body>
<form>
<select class="special-flexselect" id="school" name="school" tabindex="1">
<option value=""></option>
<option value="1">馬克周的痞客幫</option>
<option value="2">痞客幫</option>
<option value="3">刀塔傳奇</Option>
<option value="4">臉書</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>
<input type="submit" value="Go" tabindex="2"/>
</form>
</body>
</html>
留言列表
