ตัวอย่างเช่น jQuery UI - โดยอัตโนมัติ (การเติมข้อความอัตโนมัติ)
ค้นหาและค่าตัวกรองบนพื้นฐานของข้อมูลผู้ใช้ที่ช่วยให้ผู้ใช้สามารถค้นหาและเลือกจากรายการของค่าที่ตั้งไว้
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับองค์ประกอบการเติมข้อความอัตโนมัติ, ดูเอกสาร API สมาชิกโดยอัตโนมัติ (ทำให้สมบูรณ์อัตโนมัติ Widget ที่)
ใช้ส่วนนี้เพื่อ search.php ดาวน์โหลด
ฟังก์ชั่นเริ่มต้น
เมื่อคุณช่องใส่ทำโดยอัตโนมัติ (การเติมข้อความอัตโนมัติ) สมาชิกให้คำแนะนำ ในตัวอย่างนี้มีให้บริการเป็นภาษาโปรแกรมตัวเลือกที่แนะนำคุณสามารถป้อน "ja" ลองแล้วคุณจะได้รับ Java หรือ JavaScript
แหล่งข้อมูลอาร์เรย์ JavaScript ง่ายโดยใช้ตัวเลือกแหล่งที่มาที่มีอยู่ให้กับสมาชิก
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI อัตโนมัติเสร็จสิ้น (เติมข้อความอัตโนมัติ) - ฟังก์ชั่นเริ่มต้น </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
var availableTags = [
"ActionScript"
"AppleScript"
"งูเห่า"
"พื้นฐาน"
"C"
"C ++"
"Clojure"
"โคบอล"
"ColdFusion"
"เออร์แลง"
"Fortran"
"แรง"
"Haskell"
"Java"
"JavaScript"
"ชัด"
"เพิร์ล"
"PHP"
"งูใหญ่"
"ทับทิม"
"สกาล่า"
"โครงการ"
];
$ ( "แท็ก #") .autocomplete ({
แหล่งที่มา: availableTags
});
});
</ script>
</ head>
<body>
<ระดับ Div = "UI-Widget">
<label สำหรับ = "แท็ก"> แท็ก: </ label>
<input id = "แท็ก">
</ div>
</ body>
</ html>
สำเนียง
ข้อมูลการเติมข้อความอัตโนมัติโดยใช้ตัวเลือกแหล่งที่มาในการปรับแต่งผลการค้นหาเพื่อให้ตรงกับรายการที่มีตัวอักษรสำเนียงแม้ว่าฟิลด์ข้อความไม่ประกอบด้วยอักขระเน้นเสียงจะตรงกับ แต่ถ้าคุณพิมพ์อักขระเน้นเสียงในฟิลด์ข้อความก็ไม่ได้แสดงผลลัพธ์ของรายการที่ไม่ใช่ความเครียด
ลองพิมพ์ "โจ" คุณเห็น "จอห์น" และ "Jorn" จากนั้นพิมพ์ "โจ" เท่านั้นที่จะเห็น "Jorn"
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI อัตโนมัติเสร็จสิ้น (เติมข้อความอัตโนมัติ) - สำเนียง </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
ชื่อ var = [ "Jörn Zaefferer", "สกอตต์González", "จอห์น Resig"];
var accentMap = {
"A": "A",
"O": "O"
};
var ปกติ = function (คำ) {
var เกษียณ = "";
สำหรับ (var i = 0; i <term.length; i ++) {
เกษียณ + = accentMap [term.charAt (i)] || term.charAt (i);
}
กลับเกษียณ;
};
$ ( "#developer") .autocomplete ({
แหล่งที่มา: ฟังก์ชั่น (ขอการตอบสนอง) {
var จับคู่ = RegExp ใหม่ ($ .ui.autocomplete.escapeRegex (request.term), "ฉัน");
การตอบสนอง ($ .grep (ชื่อฟังก์ชั่น (ค่า) {
value = value.label || || value.value ค่า;
กลับ matcher.test (ค่า) || matcher.test (ปกติ (ค่า));
}));
}
});
});
</ script>
</ head>
<body>
<ระดับ Div = "UI-Widget">
<form>
<label สำหรับ = "นักพัฒนา"> ผู้พัฒนา: </ label>
<input id = "นักพัฒนา">
</ form>
</ div>
</ body>
</ html>
การจัดหมวดหมู่
การจัดหมวดหมู่ผลการค้นหา ลองพิมพ์ "A" หรือ "n"
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI อัตโนมัติเสร็จสิ้น (เติมข้อความอัตโนมัติ) - ประเภท </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<style>
.ui-เติมข้อความอัตโนมัติหมวดหมู่ {
font-weight: หนา;
padding: .2em .4em;
margin: 0 .8em .2em;
line-height: 1.5;
}
</ style>
<script>
$ .widget ( "Custom.catcomplete", $ .ui.autocomplete {
_renderMenu: ฟังก์ชั่น (UL, รายการ) {
var = ที่นี้
currentCategory = "";
$ .each (รายการฟังก์ชั่น (ดัชนีรายการ) {
ถ้า (item.category! = currentCategory) {
ul.append ( "<li class = 'UI-เติมข้อความอัตโนมัติหมวดหมู่"> "+ item.category +" </ li> ");
currentCategory = item.category;
}
that._renderItemData (UL รายการ);
});
}
});
</ script>
<script>
$ (ฟังก์ชั่น () {
ข้อมูล var = [
{ป้ายชื่อ: "เด" Category: ""},
{ป้ายชื่อ: "แอนเดรี" Category: ""},
{ป้ายชื่อ: "Antal" Category: ""},
{ป้ายชื่อ: "annhhx10" หมวดหมู่: "ผลิตภัณฑ์"},
{ป้ายชื่อ: "annk K12" หมวดหมู่: "ผลิตภัณฑ์"},
{ป้ายชื่อ: "annttop C13" หมวดหมู่: "ผลิตภัณฑ์"},
{ป้ายชื่อ: "แอนเดอเด" หมวดหมู่: "คน"},
{ป้ายชื่อ: "แอนเดอ Andreas" หมวดหมู่: "คน"},
{ป้ายชื่อ: "แอนเดรีจอห์นสัน" หมวดหมู่: "คน"}
];
$ ( "#search") .catcomplete ({
ล่าช้า: 0
ที่มา: ข้อมูล
});
});
</ script>
</ head>
<body>
<label สำหรับ = "ค้นหา"> ค้นหา: </ label>
<input id = "ค้นหา">
</ body>
</ html>
กล่องคำสั่งผสม (Combobox)
องค์ประกอบที่กำหนดเองที่สร้างขึ้นโดยการเติมข้อความอัตโนมัติและปุ่ม คุณสามารถพิมพ์อักขระบางตัวที่จะได้รับขึ้นอยู่กับผลการป้อนข้อมูลการกรองของคุณหรือเลือกจากรายการทั้งหมดโดยใช้ปุ่ม
การป้อนข้อมูลที่ถูกอ่านจากองค์ประกอบเลือกที่มีอยู่มีการส่งผ่านไปยังการเติมข้อความอัตโนมัติตัวเลือกในการปรับแต่งแหล่งที่มา
นี้ไม่ได้เป็นสมาชิกที่สมบูรณ์แบบได้รับการสนับสนุน นี่เป็นเพียงการแสดงให้เห็นถึงคุณสมบัติการปรับแต่งเติมข้อความอัตโนมัติ สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับงานส่วนนี้กรุณาคลิกที่นี่เพื่อดูบทความ jQuery
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI อัตโนมัติเสร็จสิ้น (เติมข้อความอัตโนมัติ) - กล่องคำสั่งผสม (Combobox) </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<style>
กำหนดเอง-ComboBox {
ตำแหน่ง: ญาติ;
จอแสดงผล: อินไลน์บล็อก
}
กำหนดเอง-ComboBox-สลับ {
position: absolute;
ด้านบน: 0;
ด้านล่าง: 0;
ขอบซ้าย: -1px;
padding: 0;
/ * สนับสนุน: IE7 * /
* ความสูง: 1.7em;
* ด้านบน: 0.1em;
}
กำหนดเอง-ComboBox อินพุต {
margin: 0;
padding: 0.3em;
}
</ style>
<script>
(ฟังก์ชั่น ($) {
$ .widget ( "Custom.combobox" {
_create: ฟังก์ชั่น () {
this.wrapper = $ ( "<span>")
.addClass ( "กำหนดเอง ComboBox")
.insertAfter (this.element);
this.element.hide ();
this._createAutocomplete ();
this._createShowAllButton ();
}
_createAutocomplete: ฟังก์ชั่น () {
var เลือก this.element.children = ( ": เลือก")
value = selected.val () selected.text (): "";?
this.input = $ ( "<input>")
.appendTo (this.wrapper)
.val (ค่า)
.attr ( "ชื่อ", "")
.addClass ( "กำหนดเอง ComboBox อินพุต UI-Widget UI-Widget เนื้อหา UI-รัฐเริ่มต้น UI-มุมซ้าย")
.autocomplete ({
ล่าช้า: 0
minLength: 0
แหล่งที่มา: $ .proxy (นี้ "_source")
})
.tooltip ({
tooltipClass: "UI-รัฐไฮไลท์"
});
this._on (this.input {
autocompleteselect: ฟังก์ชั่น (เหตุการณ์ UI) {
ui.item.option.selected = true;
this._trigger ( "เลือก" เหตุการณ์ {
รายการ: ui.item.option
});
}
autocompletechange: "_removeIfInvalid"
});
}
_createShowAllButton: ฟังก์ชั่น () {
การป้อนข้อมูล var = this.input,
wasOpen = false;
$ ( "<a>")
.attr ( "tabIndex" -1)
.attr ( "ชื่อ", "แสดงรายการทั้งหมด")
.tooltip ()
.appendTo (this.wrapper)
.button ({
ไอคอน: {
หลัก: "UI-ไอคอนสามเหลี่ยม-1-S"
}
ข้อความ: เท็จ
})
.removeClass ( "UI-มุมทุกคน")
.addClass ( "กำหนดเอง ComboBox-สลับ UI-มุมขวา")
.mousedown (ฟังก์ชั่น () {
wasOpen = input.autocomplete ( "เครื่องมือ") .is ( "มองเห็น");
})
จำนวนคลิก (ฟังก์ชั่น () {
input.focus ();
// ถ้าคุณได้เห็นถ้าจะปิด (wasOpen) {
กลับ;
}
// ผ่านสตริงที่ว่างเปล่าเป็นค่าของการค้นหาการแสดงผลทั้งหมด input.autocomplete ( "ค้นหา", "");
});
}
_source: ฟังก์ชั่น (ขอการตอบสนอง) {
var จับคู่ = RegExp ใหม่ ($ .ui.autocomplete.escapeRegex (request.term), "ฉัน");
การตอบสนอง (this.element.children ( "ตัวเลือก") .map (ฟังก์ชั่น () {
ข้อความ var = $ (นี้) .Text ();
ถ้า (this.value && (! request.term || matcher.test (ข้อความ)))
กลับ {
ป้ายชื่อ: ข้อความ
คุ้มค่า: ข้อความ
ตัวเลือกนี้
};
}));
}
_removeIfInvalid: ฟังก์ชั่น (เหตุการณ์ UI) {
// เลือกรายการและไม่ดำเนินการอื่น ๆ (ถ้า ui.item) {
กลับ;
}
// การค้นหาสำหรับการแข่งขัน (กรณีตาย)
ค่า var = this.input.val ()
valueLowerCase = value.toLowerCase ()
ที่ถูกต้อง = false;
this.element.children ( "ตัวเลือก") .each (ฟังก์ชั่น () {
ถ้า ($ (นี้) .Text (). toLowerCase () === valueLowerCase) {
this.selected = ถูกต้อง = true;
กลับเท็จ;
}
});
// การแข่งขันถูกพบไม่มีการดำเนินการอื่น ๆ หาก (ที่ถูกต้อง) {
กลับ;
}
// เอา this.input ค่าไม่ถูกต้อง
.val ( "")
.attr ( "ชื่อ" ค่า + "ไม่ตรงกับรายการใด ๆ ")
.tooltip ( "เปิด");
this.element.val ( "");
this._delay (ฟังก์ชั่น () {
this.input.tooltip ( "ใกล้") .attr ( "ชื่อ", "");
} 2500);
this.input.data ( "UI-เติมข้อความอัตโนมัติ") .term = "";
}
_destroy: ฟังก์ชั่น () {
this.wrapper.remove ();
this.element.show ();
}
});
}) (JQuery);
$ (ฟังก์ชั่น () {
$ ( "#combobox") .combobox ();
$ ( "#toggle") จำนวนคลิก (ฟังก์ชั่น () {
$ ( "#combobox") .toggle ();
});
});
</ script>
</ head>
<body>
<ระดับ Div = "UI-Widget">
<label> การเขียนโปรแกรมภาษาที่คุณชื่นชอบ: </ label>
<เลือก id = "ComboBox">
<value option = ""> เลือก ... </ option>
<value option = "ActionScript"> ActionScript </ option>
<value option = "AppleScript"> AppleScript </ option>
<value option = "งูเห่า"> งูเห่า </ option>
<value option = "พื้นฐาน"> พื้นฐาน </ option>
<value option = "C"> C </ option>
<value option = "C ++"> c ++ </ option>
<value option = "Clojure"> Clojure </ option>
<value option = "COBOL"> COBOL </ option>
<value option = "ColdFusion"> ColdFusion </ option>
<value option = "Erlang"> Erlang </ option>
<value option = "Fortran"> Fortran </ option>
<value option = "Groovy"> Groovy </ option>
<value option = "Haskell"> Haskell </ option>
<value option = "Java"> Java </ option>
<value option = "JavaScript"> JavaScript </ option>
<value option = "ชัด"> เสียงกระเพื่อม </ option>
<value option = "Perl"> Perl </ option>
<value option = "PHP"> PHP </ option>
<value option = "งูใหญ่"> หลาม </ option>
<value option = "ทับทิม"> ทับทิม </ option>
<value option = "สกาล่า"> Scala </ option>
<value option = "โครงการ"> โครงการ </ option>
</ เลือก>
</ div>
<ปุ่ม id = "สลับ"> จอแสดงผลตามกล่องเลือก </ ปุ่ม>
</ body>
</ html>
ข้อมูลที่กำหนดเองและการแสดงผล
คุณสามารถใช้รูปแบบข้อมูลที่กำหนดเองและโดยเน้นเพียงแทนที่ลักษณะการทำงานเริ่มต้นและเลือกที่จะแสดงข้อมูล
ลองพิมพ์ "J" หรือกดปุ่มลูกศรลงที่คุณจะได้รับรายชื่อของรายการ
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI อัตโนมัติเสร็จสิ้น (เติมข้อความอัตโนมัติ) - ข้อมูลที่กำหนดเองและการแสดง </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<style>
# โครงการฉลาก {
จอแสดงผล: บล็อก
font-weight: หนา;
ขอบล่าง: 1em;
}
# โครงการไอคอน {
ลอย: ด้านซ้าย;
ความสูง: 32px;
ความกว้าง: 32px;
}
# โครงการ {คำอธิบาย
margin: 0;
padding: 0;
}
</ style>
<script>
$ (ฟังก์ชั่น () {
โครงการ var = [
{
มูลค่า jQuery ""
ป้ายชื่อ: jQuery ""
คำอธิบาย: "เขียนน้อยทำมากขึ้นห้องสมุด JavaScript"
ไอคอน: "jquery_32x32.png"
}
{
คุ้มค่า: "jQuery UI-"
ป้ายชื่อ: "jQuery UI"
คำอธิบาย: "ห้องสมุดส่วนติดต่อผู้ใช้อย่างเป็นทางการสำหรับ jQuery"
ไอคอน: "jqueryui_32x32.png"
}
{
คุ้มค่า: "sizzlejs"
ป้ายชื่อ: "Sizzle JS"
คำอธิบาย: "เครื่องยนต์เลือกบริสุทธิ์ JavaScript CSS"
ไอคอน: "sizzlejs_32x32.png"
}
];
$ ( "#project") .autocomplete ({
minLength: 0
ที่มา: โครงการ
เน้นฟังก์ชั่น (เหตุการณ์ UI) {
$ ( "#project") .val (Ui.item.label);
กลับเท็จ;
}
เลือก: ฟังก์ชั่น (เหตุการณ์ UI) {
$ ( "#project") .val (Ui.item.label);
$ ( "# โครงการ-ID") .val (ui.item.value);
$ ( "# โครงการคำอธิบาย") .html (ui.item.desc);
$ ( "# โครงการไอคอน") .attr ( "src", "images /" + ui.item.icon);
กลับเท็จ;
}
})
.data ( "UI-เติมข้อความอัตโนมัติ") ._ renderItem = ฟังก์ชั่น (UL, รายการ) {
กลับ $ ( "<li>")
.append ( "<a>" + item.label + "ฟรี" + item.desc + "</a>")
.appendTo (UL);
};
});
</ script>
</ head>
<body>
<div id = "โครงการฉลาก"> เลือกรายการ (ชนิด "J"): </ div>
<img id = "โครงการไอคอน" src = "images / transparent_1x1.png" class = "UI-รัฐเริ่มต้น" alt = "">
<input id = "โครงการ">
<ประเภทขาเข้า = "ซ่อน" id = "โครงการ-ID">
<p id = "โครงการคำอธิบาย"> </ p>
</ body>
</ html>
หลายค่า
การใช้งาน: พิมพ์ตัวอักษรบางอย่างเช่น "J" คุณสามารถเห็นผลของการเขียนโปรแกรมภาษาที่เกี่ยวข้อง เลือกค่าแล้วพิมพ์อักขระที่ยังคงเพิ่มมูลค่าเพิ่ม
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการใช้ตัวเลือกแหล่งที่มาและเหตุการณ์ที่เกิดขึ้นเพื่อให้บรรลุในค่าของฟิลด์ข้อความเพียงครั้งเดียวที่จะเข้าสู่หลายอัตโนมัติ
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI อัตโนมัติเสร็จสิ้น (เติมข้อความอัตโนมัติ) - ค่าหลาย </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
var availableTags = [
"ActionScript"
"AppleScript"
"งูเห่า"
"พื้นฐาน"
"C"
"C ++"
"Clojure"
"โคบอล"
"ColdFusion"
"เออร์แลง"
"Fortran"
"แรง"
"Haskell"
"Java"
"JavaScript"
"ชัด"
"เพิร์ล"
"PHP"
"งูใหญ่"
"ทับทิม"
"สกาล่า"
"โครงการ"
];
ฟังก์ชั่น Split (Val) {
กลับ val.split (/ \ s * /);
}
ฟังก์ชั่น extractLast (คำ) {
กลับ Split (สั้น) .pop ();
}
$ ( "แท็ก #")
// เมื่อคุณเลือกรายการโดยไม่ต้องออกจากสนามข้อความ .bind ( "KeyDown" ฟังก์ชั่น (event) {
ถ้า (event.keyCode === $ .ui.keyCode.TAB &&
$ (นี้) .data ( "UI-เติมข้อความอัตโนมัติ") .menu.active) {
event.preventDefault ();
}
})
.autocomplete ({
minLength: 0
แหล่งที่มา: ฟังก์ชั่น (ขอการตอบสนอง) {
// กลับเติมข้อความอัตโนมัติ แต่จะดึงการตอบสนองรายการสุดท้าย ($ .ui.autocomplete.filter (
availableTags, extractLast (request.term)));
}
เน้นฟังก์ชั่น () {
// การป้องกันไม่ให้ได้รับค่าแทรกโฟกัสกลับเท็จ;
}
เลือก: ฟังก์ชั่น (เหตุการณ์ UI) {
แง่ var = Split (this.value);
// เอา terms.pop ป้อนข้อมูลปัจจุบัน ();
// เพิ่ม terms.push ตัวเลือกที่เลือก (ui.item.value);
// เพิ่มตัวยึดเพิ่มเครื่องหมายจุลภาคในตอนท้ายของ + terms.push อวกาศ ( "") นั้น
this.value = terms.join ( "");
กลับเท็จ;
}
});
});
</ script>
</ head>
<body>
<ระดับ Div = "UI-Widget">
<label สำหรับ = "แท็ก"> การเขียนโปรแกรมภาษา: </ label>
<input id = "แท็ก" size = "50">
</ div>
</ body>
</ html>
หลายค่าระยะไกล
การใช้งาน: พิมพ์ตัวละครทั้งสองอย่างน้อยจะได้รับชื่อของนก เลือกค่าแล้วพิมพ์อักขระที่ยังคงเพิ่มมูลค่าเพิ่ม
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการใช้ตัวเลือกแหล่งที่มาและเหตุการณ์ที่เกิดขึ้นเพื่อให้บรรลุในค่าของฟิลด์ข้อความเพียงครั้งเดียวที่จะเข้าสู่หลายอัตโนมัติ
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI อัตโนมัติเสร็จสิ้น (เติมข้อความอัตโนมัติ) - หลายค่าระยะไกล </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<style>
.ui-เติมข้อความอัตโนมัติโหลด {
พื้นหลัง: URL สีขาว ( 'images / UI-anim_basic_16x16.gif') กลางขวาไม่ซ้ำ;
}
</ style>
<script>
$ (ฟังก์ชั่น () {
ฟังก์ชั่น Split (Val) {
กลับ val.split (/ \ s * /);
}
ฟังก์ชั่น extractLast (คำ) {
กลับ Split (สั้น) .pop ();
}
$ ( "#birds")
// เมื่อคุณเลือกรายการโดยไม่ต้องออกจากสนามข้อความ .bind ( "KeyDown" ฟังก์ชั่น (event) {
ถ้า (event.keyCode === $ .ui.keyCode.TAB &&
$ (นี้) .data ( "UI-เติมข้อความอัตโนมัติ") .menu.active) {
event.preventDefault ();
}
})
.autocomplete ({
แหล่งที่มา: ฟังก์ชั่น (ขอการตอบสนอง) {
$ .getJSON ( "Search.php" {
ระยะ: extractLast (request.term)
} Response);
}
ค้นหา: ฟังก์ชั่น () {
// ขั้นต่ำที่กำหนดเองในระยะยาว var = extractLast (this.value);
ถ้า (term.length <2) {
กลับเท็จ;
}
}
เน้นฟังก์ชั่น () {
// การป้องกันไม่ให้ได้รับค่าแทรกโฟกัสกลับเท็จ;
}
เลือก: ฟังก์ชั่น (เหตุการณ์ UI) {
แง่ var = Split (this.value);
// เอา terms.pop ป้อนข้อมูลปัจจุบัน ();
// เพิ่ม terms.push ตัวเลือกที่เลือก (ui.item.value);
// เพิ่มตัวยึดเพิ่มเครื่องหมายจุลภาคในตอนท้ายของ + terms.push อวกาศ ( "") นั้น
this.value = terms.join ( "");
กลับเท็จ;
}
});
});
</ script>
</ head>
<body>
<ระดับ Div = "UI-Widget">
<label สำหรับ = "นก"> Bird: </ label>
<input id = "นก" size = "50">
</ div>
</ body>
</ html>
JSONP แหล่งข้อมูลระยะไกล
เมื่อคุณพิมพ์ตัวอักษรในฟิลด์ข้อความส่วนประกอบการเติมข้อความอัตโนมัติให้ผลลัพธ์คำแนะนำ ในตัวอย่างนี้เมื่อคุณพิมพ์อย่างน้อยสองตัวละครในฟิลด์ข้อความก็จะแสดงชื่อของเมืองที่เกี่ยวข้อง
ในตัวอย่างนี้แหล่งข้อมูล เว็บเซอร์ geonames.org แม้ว่าทางเลือกของช่องข้อความหลังจากองค์ประกอบเป็นชื่อของเมือง แต่จะแสดงข้อมูลเพิ่มเติมเพื่อหารายการที่ถูกต้อง ข้อมูลยังสามารถเรียกกลับผลลัพธ์จะปรากฏในกล่องด้านล่าง
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI อัตโนมัติเสร็จสิ้น (เติมข้อความอัตโนมัติ) - JSONP แหล่งข้อมูลระยะไกล </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<style>
.ui-เติมข้อความอัตโนมัติโหลด {
พื้นหลัง: URL สีขาว ( 'images / UI-anim_basic_16x16.gif') กลางขวาไม่ซ้ำ;
}
#city {กว้าง: 25em;}
</ style>
<script>
$ (ฟังก์ชั่น () {
เข้าสู่ระบบฟังก์ชั่น (ข้อความ) {
$ ( "<div>") .Text (ข้อความ) .prependTo ( "#log");
$ ( "#log") .scrollTop (0);
}
$ ( "#city") .autocomplete ({
แหล่งที่มา: ฟังก์ชั่น (ขอการตอบสนอง) {
$ .ajax ({
URL: "http://ws.geonames.org/searchJSON"
dataType: "JSONP"
ข้อมูล: {
featureClass: "P",
สไตล์: "เต็ม"
maxRows: 12
name_startsWith: request.term
}
ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) {
การตอบสนอง ($ .map (data.geonames ฟังก์ชั่น (รายการ) {
กลับ {
ป้ายชื่อ: item.name + (item.adminName1 "," + item.adminName1 :? "") + "" + item.countryName,
มูลค่า item.name
}
}));
}
});
}
minLength: 2,
เลือก: ฟังก์ชั่น (เหตุการณ์ UI) {
เข้าสู่ระบบ (ui.item?
"ที่เลือก:" + ui.item.label:
"ไม่มีอะไรที่เลือกใส่เป็น" + this.value);
}
เปิดฟังก์ชั่น () {
$ (นี้) .removeClass ( "UI-มุมทุกคน") .addClass ( "UI-มุมด้านบน");
}
ใกล้: ฟังก์ชั่น () {
$ (นี้) .removeClass ( "UI-มุมด้านบน") .addClass ( "UI-มุมทั้งหมด");
}
});
});
</ script>
</ head>
<body>
<ระดับ Div = "UI-Widget">
<label สำหรับ = "เมือง"> เมืองของคุณ: </ label>
<input id = "เมือง">
ขับเคลื่อนโดย <a href="http://geonames.org" target="_blank"> geonames.org </a>
</ div>
<ระดับ Div = "UI-เครื่องมือ" style = "ขอบด้านบน: 2em; font-family: Arial">
ผล:
<div id = "เข้าสู่ระบบ" style = "height: 200px; width: 300px; ล้น: อัตโนมัติ;" class = "UI-Widget เนื้อหา"> </ div>
</ div>
</ body>
</ html>
แหล่งที่มาของข้อมูลจากระยะไกล
เมื่อคุณพิมพ์ตัวอักษรในฟิลด์ข้อความส่วนประกอบการเติมข้อความอัตโนมัติให้ผลลัพธ์คำแนะนำ ในตัวอย่างนี้เมื่อคุณพิมพ์อย่างน้อยสองตัวละครในฟิลด์ข้อความก็จะแสดงชื่อของนกที่เกี่ยวข้อง
ในตัวอย่างนี้แหล่งข้อมูลจะถูกส่งกลับข้อมูลสคริปต์ฝั่งเซิร์ฟเวอร์ JSON เพื่อระบุตัวเลือกแหล่งที่เรียบง่าย นอกจากนี้ minLength ตั้งค่าตัวเลือก 2 เพื่อหลีกเลี่ยงแบบสอบถามส่งกลับผลมากเกินไปเลือกเหตุการณ์ที่จะแสดงความคิดเห็นบางส่วน
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI อัตโนมัติเสร็จสิ้น (เติมข้อความอัตโนมัติ) - แหล่งที่มาข้อมูลจากระยะไกล </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<style>
.ui-เติมข้อความอัตโนมัติโหลด {
พื้นหลัง: URL สีขาว ( 'images / UI-anim_basic_16x16.gif') กลางขวาไม่ซ้ำ;
}
</ style>
<script>
$ (ฟังก์ชั่น () {
เข้าสู่ระบบฟังก์ชั่น (ข้อความ) {
$ ( "<div>") .Text (ข้อความ) .prependTo ( "#log");
$ ( "#log") .scrollTop (0);
}
$ ( "#birds") .autocomplete ({
แหล่งที่มา: "search.php"
minLength: 2,
เลือก: ฟังก์ชั่น (เหตุการณ์ UI) {
เข้าสู่ระบบ (ui.item?
"ที่เลือก:" + ui.item.value + "อาคา" + ui.item.id:
"ไม่มีอะไรที่เลือกใส่เป็น" + this.value);
}
});
});
</ script>
</ head>
<body>
<ระดับ Div = "UI-Widget">
<label สำหรับ = "นก"> Bird: </ label>
<input id = "นก">
</ div>
<ระดับ Div = "UI-เครื่องมือ" style = "ขอบด้านบน: 2em; font-family: Arial">
ผล:
<div id = "เข้าสู่ระบบ" style = "height: 200px; width: 300px; ล้น: อัตโนมัติ;" class = "UI-Widget เนื้อหา"> </ div>
</ div>
</ body>
</ html>
แคชระยะไกล
เมื่อคุณพิมพ์ตัวอักษรในฟิลด์ข้อความส่วนประกอบการเติมข้อความอัตโนมัติให้ผลลัพธ์คำแนะนำ ในตัวอย่างนี้เมื่อคุณพิมพ์อย่างน้อยสองตัวละครในฟิลด์ข้อความก็จะแสดงชื่อของนกที่เกี่ยวข้อง
เพื่อปรับปรุงประสิทธิภาพเพิ่มที่นี่แคชท้องถิ่นไม่กี่กรณีอื่น ๆ ของแหล่งข้อมูลระยะไกลคล้ายกัน นี่เพียงบันทึกแคชแบบสอบถามและแคชสามารถขยายไปยังหลายค่าแต่ละรายการเป็นค่า
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI อัตโนมัติเสร็จสิ้น (เติมข้อความอัตโนมัติ) - รีโมตแคช </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<style>
.ui-เติมข้อความอัตโนมัติโหลด {
พื้นหลัง: URL สีขาว ( 'images / UI-anim_basic_16x16.gif') กลางขวาไม่ซ้ำ;
}
</ style>
<script>
$ (ฟังก์ชั่น () {
แคช var = {};
$ ( "#birds") .autocomplete ({
minLength: 2,
แหล่งที่มา: ฟังก์ชั่น (ขอการตอบสนอง) {
ระยะ var = request.term;
ถ้า (คำในแคช) {
การตอบสนอง (แคช [ระยะ]);
กลับ;
}
$ .getJSON ( "Search.php" ขอฟังก์ชั่น (ข้อมูลสถานะ XHR) {
แคช [ระยะ] = ข้อมูล
การตอบสนอง (ข้อมูล);
});
}
});
});
</ script>
</ head>
<body>
<ระดับ Div = "UI-Widget">
<label สำหรับ = "นก"> Bird: </ label>
<input id = "นก">
</ div>
</ body>
</ html>
ผลเลื่อน
เมื่อแสดงรายการยาวของตัวเลือกที่คุณก็สามารถตั้งค่าสูงสุดสูงเพื่อป้องกันไม่ให้เมนูเติมข้อความอัตโนมัติเพื่อแสดงเมนูเกินไป ลองพิมพ์ "A" หรือ "S" ที่จะได้รับผลมาจากรายการที่สามารถเลื่อนยาว
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI อัตโนมัติเสร็จสิ้น (เติมข้อความอัตโนมัติ) - ผลเลื่อน </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<style>
.ui-เติมข้อความอัตโนมัติ {
Max-height: 100px;
ล้น-Y: อัตโนมัติ
/ * ป้องกันแถบเลื่อนแนวนอน * /
ล้น-X: ซ่อน;
}
/ * IE 6 ไม่สนับสนุน Max-สูง
* เราใช้แทนของความสูง แต่นี้จะบังคับเมนูจะปรากฏเป็นความสูง * /
* Html .ui-เติมข้อความอัตโนมัติ {
ความสูง: 100px;
}
</ style>
<script>
$ (ฟังก์ชั่น () {
var availableTags = [
"ActionScript"
"AppleScript"
"งูเห่า"
"พื้นฐาน"
"C"
"C ++"
"Clojure"
"โคบอล"
"ColdFusion"
"เออร์แลง"
"Fortran"
"แรง"
"Haskell"
"Java"
"JavaScript"
"ชัด"
"เพิร์ล"
"PHP"
"งูใหญ่"
"ทับทิม"
"สกาล่า"
"โครงการ"
];
$ ( "แท็ก #") .autocomplete ({
แหล่งที่มา: availableTags
});
});
</ script>
</ head>
<body>
<ระดับ Div = "UI-Widget">
<label สำหรับ = "แท็ก"> แท็ก: </ label>
<input id = "แท็ก">
</ div>
</ body>
</ html>
ข้อมูล XML
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการที่จะได้รับข้อมูล XML และใช้วิธีการ jQuery เพื่อแก้ไขมันและให้มันให้เติมที่เป็นแหล่งข้อมูล
ตัวอย่างนี้ยังสามารถใช้เป็นแก้ปัญหาระยะไกล XML อ้างอิงแหล่งข้อมูล - การวิเคราะห์ที่เกิดขึ้นในแต่ละคําขอโทรกลับแหล่งที่มา
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI อัตโนมัติเสร็จสิ้น (เติมข้อความอัตโนมัติ) - ข้อมูล XML </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<style>
.ui-เติมข้อความอัตโนมัติโหลด {พื้นหลัง: URL สีขาว ( 'images / UI-anim_basic_16x16.gif') กลางขวาไม่ซ้ำ;}
</ style>
<script>
$ (ฟังก์ชั่น () {
เข้าสู่ระบบฟังก์ชั่น (ข้อความ) {
$ ( "<div />") .Text (ข้อความ) .prependTo ( "#log");
$ ( "#log") .attr ( "ScrollTop", 0);
}
$ .ajax ({
URL: "london.xml"
dataType: "XML"
ความสำเร็จ: ฟังก์ชั่น (xmlResponse) {
var ข้อมูล = $ ( "geoname" xmlResponse) .map (ฟังก์ชั่น () {
กลับ {
มูลค่า: $ ( "ชื่อ" นี้) .Text () + "" +
($ .trim ($ ( "COUNTRYNAME" นี้) .Text ()) || "(ไม่ทราบจังหวัด)")
ID: $ ( "geonameId" นี้) .Text ()
};
.}) รับ ();
$ ( "#birds") .autocomplete ({
ที่มา: ข้อมูล
minLength: 0
เลือก: ฟังก์ชั่น (เหตุการณ์ UI) {
เข้าสู่ระบบ (ui.item?
"ที่เลือก:" + ui.item.value + "geonameId:" + ui.item.id:
"ไม่มีอะไรที่เลือกใส่เป็น" + this.value);
}
});
}
});
});
</ script>
</ head>
<body>
<ระดับ Div = "UI-Widget">
<label สำหรับ = "นก"> ลอนดอน Match: </ label>
<input id = "นก">
</ div>
<ระดับ Div = "UI-เครื่องมือ" style = "ขอบด้านบน: 2em; font-family: Arial">
ผล:
<div id = "เข้าสู่ระบบ" style = "height: 200px; width: 300px; ล้น: อัตโนมัติ;" class = "UI-Widget เนื้อหา"> </ div>
</ div>
</ body>
</ html>