1. ดาวน์โหลด jquery-latest.js, JSuggest.js และ JSuggest.css
ซอร์สโค้ดของ JSuggest.js มีดังนี้
คัดลอกรหัสรหัสดังต่อไปนี้:
-
-
* คำอธิบาย: กล่องพร้อมท์แบบเลื่อนลง JSuggest
-
ฟังก์ชั่น JSuggest(){
// กล่องดรอปดาวน์ DIV
this.div = โมฆะ;
//ul ภายใต้ DIV
this.ul = โมฆะ;
//กล่องใส่ข้อความ
นี้.อินพุต = null;
// วัตถุ LI ที่เลือกโดย DIV ปัจจุบัน
this.current_li = โมฆะ;
-
* ซ่อนกล่องพร้อมท์แบบเลื่อนลง
-
นี้.ซ่อน = ฟังก์ชั่น(){
this.div.style.visibility = "ซ่อน";
-
-
* แสดงกล่องข้อความแบบเลื่อนลง
-
this.show = ฟังก์ชั่น () {
this.div.style.visibility = "มองเห็นได้";
-
-
* สถานะกล่องข้อความแบบเลื่อนลง
-
this.status = ฟังก์ชั่น () {
ถ้า (this.div.style.visibility == "มองเห็นได้"){
กลับเป็นจริง;
-
กลับเท็จ;
-
-
* ตั้งค่า LI ที่เลือกโดย DIV ปัจจุบัน
-
this.setCurrent_li = ฟังก์ชั่น (li, obj) {
var co = obj.current_li;
ถ้า (co != null){
co.className = "";
-
li.className = "li_index";
obj.current_li = li;
-
-
* เริ่มต้นการแนะนำ
-
* input_id: ID ของกล่องอินพุต
* defHeight: ความสูงของกล่องข้อความแบบเลื่อนลง (คุณไม่สามารถระบุได้)
-
this.init = ฟังก์ชั่น (input_id, defHeight) {
this.input = document.getElementById(input_id);
//this.input.autocomplete = "ปิด";
var left = this.input.offsetLeft;
var ด้านบน = this.input.offsetTop;
ความกว้าง var = this.input.offsetWidth;
ความสูง var = this.input.offsetHeight;
var p=this.input.offsetParent;
ในขณะที่(p!= null){
ซ้าย+=p.offsetLeft;
ด้านบน+=p.offsetTop;
p=p.offsetParent;
-
บน+=ความสูง;
ถ้า (defHeight==null || defHeight==0){
ส่วนสูง = 150;
}อื่น{
ความสูง = defHeight;
-
this.input.value = "";
var obj = นี่;
this.input.onkeydown = ฟังก์ชั่น (evt) {
obj.onkeydown(evt, obj);
-
this.div = document.createElement("div");
this.div.style.width = ความกว้าง + "px";
this.div.style.height = ความสูง + "px";
this.div.style.left = ซ้าย + "px";
this.div.style.top = ด้านบน + "px";
this.ul = document.createElement("ul");
this.div.appendChild(this.ul);
this.div.className = "jsuggest";
document.body.appendChild(this.div);
-
-
* ลบ LI ทั้งหมดใน UL ภายใต้ DIV
-
this.remove = ฟังก์ชั่น () {
this.current_li = โมฆะ;
ในขณะที่(this.removeLI());
-
-
* ลบ LI ใน UL ภายใต้ DIV
-
this.removeLI = ฟังก์ชั่น () {
โหนด var = this.ul.childNodes;
สำหรับ (var n ในโหนด) {
ถ้า (โหนด[n] != null && โหนด[n].nodeName == "LI"){
// การแจ้งเตือน (โหนด [n] .innerHTML);
this.ul.removeChild (โหนด [n]);
กลับเป็นจริง;
-
-
กลับเท็จ;
-
-
* สร้าง LI ใน DIV
-
this.create = ฟังก์ชั่น (รายการ) {
นี้.remove();
var li_item = items.split(",");
สำหรับ (var i ใน li_item){
//แจ้งเตือน(li_item[i]);
var li = document.createElement("li");
li.innerHTML = li_item[i];
var obj = นี่;
li.onmousedown = ฟังก์ชั่น(){
obj.onmousedown(นี่ obj);
-
li.onmouseover = นี่.onmouseover;
li.onmouseout = นี่.onmouseout;
this.ul.appendChild(li);
-
นี้.แสดง();
-
-
* กิจกรรมกดกล่องข้อความ
-
this.onkeydown = ฟังก์ชั่น (evt, obj) {
ถ้า (!obj.status()){
กลับเท็จ;
-
ถ้า (!evt && window.event)
-
evt = window.event;
-
คีย์ var = evt.keyCode;
//var KEYUP = 38;
//var KEYDOWN = 40;
//var KEYENTER = 13;
วาร์ ob = obj;
ถ้า (คีย์ == 38){
obj.upKeySelected();
} อื่นถ้า (คีย์ == 40){
obj.downKeySelected();
} มิฉะนั้นถ้า (คีย์ == 13 || คีย์ == 27){
obj.ซ่อน();
-
-
this.getCurrentLiIndex = ฟังก์ชั่น(){
ถ้า(this.current_li == null){
กลับ -1;
-
โหนด var = this.ul.childNodes;
สำหรับ (var n ในโหนด) {
ถ้า (โหนด[n].nodeName == "LI"){
ถ้า (โหนด [n] == this.current_li){
กลับ n;
-
-
-
-
this.getLi = ฟังก์ชั่น (ดัชนี) {
โหนด var = this.ul.childNodes;
สำหรับ (var n ในโหนด) {
ถ้า (โหนด [n].nodeName == "LI" && n == ดัชนี){
this.setCurrent_li(โหนด[n] นี้);
ส่งคืนโหนด [n];
-
-
-
this.upKeySelected = ฟังก์ชั่น () {
var num = this.getCurrentLiIndex();
ถ้า (หมายเลข != -1 && num > 0){
หมายเลข--;
โหนด var = this.getLi (หมายเลข);
this.setCurrent_li (โหนด, นี้);
this.input.value = node.innerHTML;
-
-
this.downKeySelected = ฟังก์ชั่น (obj) {
var num = this.getCurrentLiIndex();
ถ้า (หมายเลข == -1){
หมายเลข = 0;
}อื่น {
หมายเลข++;
ถ้า (num >= this.ul.childNodes.length) คืนค่าเท็จ;
-
โหนด var = this.getLi (หมายเลข);
this.setCurrent_li (โหนด, นี้);
this.input.value = node.innerHTML;
-
-
* กิจกรรมกดเมาส์ DIV
-
this.onmousedown = ฟังก์ชั่น (thiz, obj) {
obj.setCurrent_li(thiz, obj);
obj.input.value = thiz.innerHTML;
obj.ซ่อน();
-
-
* เหตุการณ์การเคลื่อนไหวของเมาส์ DIV
-
นี้.onmouseover = ฟังก์ชั่น(){
ถ้า (this.className != "li_index"){
this.className = "li_check";
-
-
-
* กิจกรรม DIV เมาส์ออก
-
นี้.onmouseout = ฟังก์ชั่น(){
ถ้า (this.className == "li_check"){
this.className = "";
-
-
-
var jsuggest = JSuggest ใหม่ ();
หน้า 2.jsp
คัดลอกรหัสรหัสดังต่อไปนี้:
<input id="text" name="text" type="text" onkeyup="go(event, this.value);"/>
<script type="text/javascript">
เจ (เอกสาร) พร้อม (ฟังก์ชั่น () {
//เริ่มต้น JSUGGEST
jsuggest.init("ข้อความ");
//หรือใช้วิธีต่อไปนี้เพื่อกำหนดความสูงของกล่องแบบเลื่อนลง
//jsuggest.init("ข้อความ",200);
-
ฟังก์ชั่น go (เหตุการณ์, ค่า) {
เหตุการณ์= เหตุการณ์ ? เหตุการณ์ : (window.event ? window.event : อาร์กิวเมนต์ [0]);
var url = "url?suggestInput="+encodeURIComponent(value);//url คือการดำเนินการเฉพาะหรือที่อยู่ jsp ฯลฯ และค่าที่ส่งคืนเป็นสตริงที่คั่นด้วยเครื่องหมายจุลภาค
goSuggestInput(เหตุการณ์, url, ค่า);
-
ฟังก์ชั่น goSuggestInput (evnet, url, ค่า) {
ถ้า (ค่า == ""){
//ซ่อนกล่องแบบเลื่อนลงหากช่องป้อนข้อมูลว่างเปล่า
jsuggest.hide();
กลับเท็จ;
-
// ตรวจสอบให้แน่ใจว่า evt เป็นเหตุการณ์ที่ถูกต้อง
ถ้า (!evnet && window.event)
-
evnet = window.event;
-
คีย์ var = evnet.keyCode;
ถ้า (คีย์ == 38 || คีย์ == 40 || คีย์ == 13 || คีย์ == 27){
กลับเท็จ;
-
เจ.อาแจ็กซ์({
ประเภท: "โพสต์",
ที่อยู่: URL,
ประเภทข้อมูล: "ข้อความ",
แคช: "เท็จ"
beforeSend: ฟังก์ชั่น (XMLHttpRequest) {
-
สำเร็จ: ฟังก์ชั่น (ข้อมูล, สถานะข้อความ) {
//เพิ่มข้อมูลลงในช่องแบบเลื่อนลง
jsuggest.create(ข้อมูล);
-
สมบูรณ์: ฟังก์ชั่น (XMLHttpRequest, textStatus) {
-
ข้อผิดพลาด: ฟังก์ชั่น () {
alert("ขออภัย เซิร์ฟเวอร์ไม่ว่าง!");
-
-
-
</สคริปต์>