مسج واجهة المستخدم سبيل المثال - تلقائيا (الإكمال التلقائي)
بحث وقيمة مرشح على أساس إدخال المستخدم، مما يسمح للمستخدمين بسرعة لإيجاد واختيار من قائمة القيم مسبقا.
لمزيد من المعلومات حول المكون الإكمال التلقائي، راجع وثائق API تلقائيا عضوا (والإكمال التلقائي في القطعة) .
استخدم هذا المقطع ل search.php تحميل .
وظيفة الافتراضي
عند حقل الإدخال، يتم تلقائيا توفر (الإكمال التلقائي) أعضاء المشورة. في هذا المثال، يتم توفيرها هناك لغة برمجة الخيار الموصى بها، يمكنك إدخال "جا" محاولة ذلك، يمكنك الحصول على جافا أو جافا سكريبت.
مصدر البيانات مجموعة جافا سكريبت بسيطة باستخدام هي خيارات مصدر المتاحة للأعضاء.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم لصناعة السيارات في إكمال (الإكمال التلقائي) - وظيفة الافتراضي </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (وظيفة () {
availableTags فار = [
"أكشن"،
"ابليسكريبت"
"الحية"،
"BASIC"،
"C"،
"C ++"
"كلوجر"
"كوبول"
"كولد فيوجن"،
"إرلانج"
"فورتران"،
"رائع"،
"هاسكل"،
"جافا"،
"جافا سكريبت"،
"يسب"
"بيرل"،
"بي إتش بي"،
"بايثون"،
"روبي"،
"سكالا"،
"خطة"
].
$ ( "#tags") .autocomplete ({
مصدر: availableTags
})؛
})؛
</ script>
</ رئيس>
<body>
<فئة الدرجة = "واجهة المستخدم القطعة">
<تسمية ل= "العلامات"> العلامة: </ التسمية>
<إدخال معرف = "العلامات">
</ div>
</ الجسم>
</ HTML>
معلمة
حقل الإكمال التلقائي باستخدام خيارات مصدر لتخصيص النتائج لمباراة البنود مع أحرف معلمة، حتى إذا كان الحقل النص لا يحتوي على أحرف معلمة وستكون مباراة. ولكن إذا قمت بكتابة أحرف معلمة في حقل النص، فإنه لا يعرض نتائج المواد غير الإجهاد.
حاول كتابة "جو"، تشاهد "جون" و "جورن"، ثم اكتب "جو"، وسوف نرى فقط "جورن".
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم لصناعة السيارات في إكمال (الإكمال التلقائي) - معلمة </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (وظيفة () {
أسماء فار = [ "يورن Zaefferer"، "سكوت غونزاليس"، "جون Resig"]؛
accentMap فار = {
"أ": "أ"،
"س": "س"
}؛
فار تطبيع = وظيفة (المدى) {
فار المتقاعد = ""؛
ل(فار ط = 0؛ ط <term.length، وأنا ++) {
المتقاعد + = accentMap [term.charAt (ط)] || term.charAt (ط)؛
}
عودة المتقاعد.
}؛
$ ( "#developer") .autocomplete ({
مصدر: وظيفة (طلب والاستجابة) {
فار المنظر = التعبير العادي الجديد ($ .ui.autocomplete.escapeRegex (request.term)، "أنا")؛
استجابة ($ .grep (الأسماء وظيفة (القيمة) {
القيمة = value.label || value.value || القيمة؛
العودة matcher.test (القيمة) || matcher.test (تطبيع (القيمة))؛
}))؛
}
})؛
})؛
</ script>
</ رئيس>
<body>
<فئة الدرجة = "واجهة المستخدم القطعة">
<النموذج>
<تسمية ل= "المطور"> المطور: </ التسمية>
<إدخال معرف = "المطور">
</ النموذج>
</ div>
</ الجسم>
</ HTML>
تصنيف
البحث التصنيف نتيجة. حاول كتابة "أ" أو "ن".
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم لصناعة السيارات في إكمال (الإكمال التلقائي) - الفئة </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
.ui-الإكمال التلقائي فئة {
الخط الوزن: جريئة؛
الحشو: .2em .4em.
هامش: .8em 0 .2em.
خط الطول: 1.5؛
}
</ النمط>
<script>
$ .widget ( "Custom.catcomplete"، $ .ui.autocomplete، {
_renderMenu: وظيفة (المجاهدين، البنود) {
فار ذلك = هذا،
currentCategory = ""؛
$. كل (سلعي، وظيفة (مؤشر، البند) {
إذا (item.category! = currentCategory) {
ul.append ( "<لى الطبقة =" واجهة المستخدم، الإكمال التلقائي فئة ">" + item.category + "</ لى>")؛
currentCategory = item.category.
}
that._renderItemData (المجاهدين، البند)؛
})؛
}
})؛
</ script>
<script>
$ (وظيفة () {
= البيانات فار [
{التسمية: "أندرس" فئة: ""}،
{التسمية: "أندرياس"، الفئة: ""}،
{التسمية: "ANTAL" فئة: ""}،
{التسمية: "annhhx10"، فئة "المنتجات"}،
{التسمية: "K12 annk"، فئة "المنتجات"}،
{التسمية: "C13 annttop"، فئة "المنتجات"}،
{التسمية: "اندرس اندرسون"، فئة "الناس"}،
{التسمية: "أندرياس أندرسون"، وفئة "الناس"}،
{التسمية: "أندرياس جونسون"، وفئة "الناس"}
].
$ ( "# البحث تورنت") .catcomplete ({
تأخير: 0،
المصدر: البيانات
})؛
})؛
</ script>
</ رئيس>
<body>
<تسمية ل= "بحث"> البحث: </ التسمية>
<إدخال معرف = "بحث">
</ الجسم>
</ HTML>
مربع التحرير والسرد (منسدل)
وثمة عنصر مخصصة تم إنشاؤها من قبل الإكمال التلقائي وزر. يمكنك كتابة بعض الأحرف للحصول على أساس نتائج بحثك تصفية المدخلات، أو اختر من قائمة كاملة باستخدام أزرار.
قراءة المدخلات من عناصر مختارة القائمة، بعد أن مرت إلى الخيار الإكمال التلقائي لتخصيص المصدر.
هذا ليس عضوا الكمال غير معتمد. هنا هو مجرد إظهار ميزات التخصيص الإكمال التلقائي. لمزيد من التفاصيل حول هذا الجزء يعمل، الرجاء الضغط هنا لعرضها مسج.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم لصناعة السيارات في إكمال (الإكمال التلقائي) - مربع التحرير والسرد (منسدل) </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
.custom-منسدل {
موقع: نسبي.
عرض: مضمنة كتلة.
}
.custom-منسدل-تبديل {
الموقف: مطلقة؛
أعلى: 0؛
أسفل: 0؛
هامش اليسار: -1px.
الحشو: 0؛
/ * الدعم: IE7 * /
* الطول: 1.7em.
* الأعلى: 0.1em.
}
.custom-منسدل المدخلات {
هامش: 0؛
الحشو: 0.3em.
}
</ النمط>
<script>
(وظيفة ($) {
$ .widget ( "Custom.combobox"، {
_create: وظيفة () {
this.wrapper = $ ( "<SPAN>")
.addClass ( "العرف منسدل")
.insertAfter (this.element)؛
this.element.hide ()؛
this._createAutocomplete ()؛
this._createShowAllButton ()؛
}،
_createAutocomplete: وظيفة () {
فار اختيار = this.element.children ( ": اختيار")،
القيمة = selected.val () selected.text (): ""؛؟
this.input = $ ( "<الإدخال>")
.appendTo (this.wrapper)
.val (قيمة)
.attr ( "عنوان"، "")
.addClass ( "العرف منسدل-المدخلات واجهة المستخدم واجهة المستخدم التطبيق المصغر تطبيق مصغر-المحتوى الافتراضي واجهة المستخدم للدولة، واجهة المستخدم اليسار زاوية")
.autocomplete ({
تأخير: 0،
MINLENGTH: 0،
مصدر: $ .proxy (هذا، "_source")
})
.tooltip ({
tooltipClass: "واجهة المستخدم للدولة-تسليط الضوء على"
})؛
this._on (this.input، {
autocompleteselect: وظيفة (الحدث، واجهة المستخدم) {
ui.item.option.selected = صحيح.
this._trigger ( "حدد"، الحدث، {
البند: ui.item.option
})؛
}،
autocompletechange: "_removeIfInvalid"
})؛
}،
_createShowAllButton: وظيفة () {
فار المدخلات = this.input،
wasOpen = كاذبة؛
$ ( "<A>")
.attr ( "tabIndex"، -1)
.attr ( "عنوان"، "تظهر جميع البنود")
.tooltip ()
.appendTo (this.wrapper)
.button ({
الرموز: {
المرحلة الابتدائية: "واجهة المستخدم-رمز-مثلث-1-ق"
}،
النص: كاذبة
})
.removeClass ( "واجهة المستخدم الزاوية للجميع")
.addClass ( "العرف منسدل-تبديل واجهة المستخدم الزاوية اليمنى")
.mousedown (وظيفة () {
wasOpen = input.autocomplete ( "القطعة"). هل ( ": مرئي")؛
})
. انقر (وظيفة () {
input.focus ()؛
// إذا رأيتم مغلق إذا (wasOpen) {
العودة؛
}
// تمرير سلسلة فارغة حيث بلغت قيمة البحث، تظهر جميع النتائج input.autocomplete ( "بحث"، "")؛
})؛
}،
_source: وظيفة (طلب والاستجابة) {
فار المنظر = التعبير العادي الجديد ($ .ui.autocomplete.escapeRegex (request.term)، "أنا")؛
استجابة (this.element.children ( "خيار") .MAP (وظيفة () {
النص فار = $ (هذا) .text ()؛
إذا (this.value && (! request.term || matcher.test (النص)))
العودة {
التسمية: النص،
القيمة: النص،
الخيار: هذا
}؛
}))؛
}،
_removeIfInvalid: وظيفة (الحدث، واجهة المستخدم) {
// حدد عنصرا ولا تنفيذ إجراءات أخرى إذا (ui.item) {
العودة؛
}
// البحث عن مباراة (حالة الأحرف)
قيمة فار = this.input.val ()،
valueLowerCase = value.toLowerCase ()،
صالحة = كاذبة؛
this.element.children ( "خيار"). كل (وظيفة () {
إذا ($ (هذا) .text (). toLowerCase () === valueLowerCase) {
this.selected = صالحة = صحيح.
عودة كاذبة.
}
})؛
// تم العثور على المباراة، أي إجراء آخر إذا (سارية المفعول) {
العودة؛
}
// إزالة this.input قيمة غير صالحة
.val ( "")
.attr ( "عنوان"، قيمة + "لا يطابق أي بند")
.tooltip ( "فتح")؛
this.element.val ( "")؛
this._delay (وظيفة () {
this.input.tooltip ( "وثيقة") .attr ( "عنوان"، "")؛
}، 2500)؛
this.input.data ( "واجهة المستخدم، الإكمال التلقائي") .term = ""؛
}،
_destroy: وظيفة () {
this.wrapper.remove ()؛
this.element.show ()؛
}
})؛
}) (مسج)؛
$ (وظيفة () {
$ ( "#combobox") .combobox ()؛
$ ( "#toggle"). انقر (وظيفة () {
$ ( "#combobox") .toggle ()؛
})؛
})؛
</ script>
</ رئيس>
<body>
<فئة الدرجة = "واجهة المستخدم القطعة">
<تسمية> لغتك البرمجة المفضلة: </ التسمية>
<تحديد هوية = "منسدل">
<قيمة الخيار = ""> اختر ... </ خيار>
<قيمة الخيار = "أكشن"> أكشن </ خيار>
<قيمة الخيار = "ابليسكريبت"> ابليسكريبت </ خيار>
<قيمة الخيار = "الحية"> آسيا والمحيط الهادئ </ خيار>
<قيمة الخيار = "BASIC"> BASIC </ خيار>
<قيمة الخيار = "C"> C </ خيار>
<قيمة الخيار = "C ++"> C ++ </ خيار>
<قيمة الخيار = "كلوجر"> كلوجر </ خيار>
<قيمة الخيار = "كوبول"> كوبول </ خيار>
<قيمة الخيار = "كولد فيوجن"> كولد فيوجن </ خيار>
<قيمة الخيار = "إرلانج"> إرلانج </ خيار>
<قيمة الخيار = "فورتران"> فورتران </ خيار>
<قيمة الخيار = "رائع"> رائع </ خيار>
<قيمة الخيار = "هاسكل"> هاسكل </ خيار>
<قيمة الخيار = "جافا"> جافا </ خيار>
<قيمة الخيار = "جافا سكريبت"> جافا سكريبت </ خيار>
<قيمة الخيار = "يسب"> اللثغة </ خيار>
<قيمة الخيار = "بيرل"> بيرل </ خيار>
<قيمة الخيار = "PHP"> PHP </ خيار>
<قيمة الخيار = "بايثون"> بيثون </ خيار>
<قيمة الخيار = "روبي"> روبي </ خيار>
<قيمة الخيار = "سكالا"> سكالا </ خيار>
<قيمة الخيار = "مخطط"> برنامج </ خيار>
</ تحديد>
</ div>
<زر معرف = "تبديل"> عرض مربع الاختيار على أساس </ زر>
</ الجسم>
</ HTML>
بيانات مخصصة وعرض
يمكنك استخدام تنسيق البيانات المخصصة، والتركيز ببساطة تجاوز السلوك الافتراضي واختر لعرض البيانات.
حاول كتابة "ي"، أو اضغط على مفتاح السهم للأسفل، يمكنك الحصول على قائمة من البنود.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم لصناعة السيارات في إكمال (الإكمال التلقائي) - البيانات حسب الطلب ويعرض </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
# مشروع التسمية {
عرض: كتلة.
الخط الوزن: جريئة؛
هامش القاع: 1em.
}
# المشروعات رمز {
تطفو: اليسار،
الطول: 32px؛
العرض: 32px؛
}
# المشروعات وصف {
هامش: 0؛
الحشو: 0؛
}
</ النمط>
<script>
$ (وظيفة () {
مشاريع فار = [
{
القيمة: "مسج"،
التسمية: "مسج"،
تنازلي: "الكتابة أقل، بذل المزيد من الجهد، ومكتبة جافا سكريبت"،
رمز: "jquery_32x32.png"
}،
{
القيمة: "مسج-واجهة المستخدم"،
التسمية: "مسج واجهة المستخدم"،
تنازلي: "المكتبة واجهة المستخدم الرسمية للمسج"،
رمز: "jqueryui_32x32.png"
}،
{
القيمة: "sizzlejs"
التسمية: "إز شبيبة"،
تنازلي: "محرك محدد نقية جافا سكريبت CSS"،
رمز: "sizzlejs_32x32.png"
}
].
$ ( "#project") .autocomplete ({
MINLENGTH: 0،
مصدر: مشاريع،
التركيز: وظيفة (الحدث، واجهة المستخدم) {
$ ( "#project") .val (Ui.item.label)؛
عودة كاذبة.
}،
حدد: وظيفة (الحدث، واجهة المستخدم) {
$ ( "#project") .val (Ui.item.label)؛
$ ( "# مشروع معرف") .val (ui.item.value)؛
$ ( "# المشروعات وصف"). هتمل (ui.item.desc)؛
$ ( "# المشروعات رمز") .attr ( "SRC"، "صور /" + ui.item.icon)؛
عودة كاذبة.
}
})
.data ( "واجهة المستخدم، الإكمال التلقائي") ._ renderItem = وظيفة (المجاهدين، البند) {
العودة $ ( "<li> و")
.append ( "<A>" + item.label + "<BR>" + item.desc + "</A>")
.appendTo (المجاهدين)؛
}؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "مشروع التسمية"> حدد البند (نوع "ي"): </ div>
على <img معرف = "رمز المشروع" SRC = "صور / transparent_1x1.png" الطبقة = "واجهة المستخدم للدولة الافتراضي" بديل = "">
<إدخال معرف = "مشروع">
<نوع الإدخال = "مخفي" معرف = "مشروع معرف">
<P معرف = "مشروع وصف"> </ P>
</ الجسم>
</ HTML>
قيم متعددة
الاستعمال: اكتب بعض الشخصيات، مثل "ي"، يمكنك ان ترى نتائج لغات البرمجة ذات الصلة. تحديد قيمة، ثم اكتب الأحرف تستمر لإضافة قيمة إضافية.
يوضح هذا المثال كيفية استخدام خيارات المصدر والأحداث لتحقيق قيمة حقل نص واحد للدخول متعددة التلقائي.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم لصناعة السيارات في إكمال (الإكمال التلقائي) - قيم متعددة </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (وظيفة () {
availableTags فار = [
"أكشن"،
"ابليسكريبت"
"الحية"،
"BASIC"،
"C"،
"C ++"
"كلوجر"
"كوبول"
"كولد فيوجن"،
"إرلانج"
"فورتران"،
"رائع"،
"هاسكل"،
"جافا"،
"جافا سكريبت"،
"يسب"
"بيرل"،
"بي إتش بي"،
"بايثون"،
"روبي"،
"سكالا"،
"خطة"
].
انقسام وظيفة (فال) {
العودة val.split (/، \ ل * /)؛
}
وظيفة extractLast (المدى) {
العودة انقسام (المدى) .pop ()؛
}
$ ( "#tags")
// عند تحديد عنصر دون ترك حقل النص .bind ( "keydown"، وظيفة (الحدث) {
إذا (event.keyCode === $ .ui.keyCode.TAB &&
$ (هذا) .data ( "واجهة المستخدم، الإكمال التلقائي") .menu.active) {
event.preventDefault ()؛
}
})
.autocomplete ({
MINLENGTH: 0،
مصدر: وظيفة (طلب والاستجابة) {
// الإكمال التلقائي الخلف، ولكن لاستخراج استجابة دخول الأخيرة ($ .ui.autocomplete.filter (
availableTags، extractLast (request.term)))؛
}،
التركيز: وظيفة () {
// منع الحصول على القيم إدراج التركيز عودة كاذبة.
}،
حدد: وظيفة (الحدث، واجهة المستخدم) {
حيث فار = الانقسام (this.value)؛
// إزالة terms.pop المدخلات الحالية ()؛
// إضافة terms.push الخيار المحدد (ui.item.value)؛
// إضافة نائبا، إضافة فاصلة في نهاية terms.push الفضاء + ( "")؛
this.value = terms.join ( "،")؛
عودة كاذبة.
}
})؛
})؛
</ script>
</ رئيس>
<body>
<فئة الدرجة = "واجهة المستخدم القطعة">
<تسمية ل= "العلامات"> لغات البرمجة: </ التسمية>
<إدخال معرف = "العلامات" حجم = "50">
</ div>
</ الجسم>
</ HTML>
قيم متعددة، جهاز التحكم عن بعد
الاستعمال: اكتب حرفين على الأقل للحصول على أسماء الطيور. تحديد قيمة، ثم اكتب الأحرف تستمر لإضافة قيمة إضافية.
يوضح هذا المثال كيفية استخدام خيارات المصدر والأحداث لتحقيق قيمة حقل نص واحد للدخول متعددة التلقائي.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم لصناعة السيارات في إكمال (الإكمال التلقائي) - قيم متعددة، بعد </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
.ui-الإكمال التلقائي التحميل {
خلفية: رابط الأبيض ( 'الصور / واجهة المستخدم anim_basic_16x16.gif') يمين الوسط بعدم تكرار.
}
</ النمط>
<script>
$ (وظيفة () {
انقسام وظيفة (فال) {
العودة val.split (/، \ ل * /)؛
}
وظيفة extractLast (المدى) {
العودة انقسام (المدى) .pop ()؛
}
$ ( "#birds")
// عند تحديد عنصر دون ترك حقل النص .bind ( "keydown"، وظيفة (الحدث) {
إذا (event.keyCode === $ .ui.keyCode.TAB &&
$ (هذا) .data ( "واجهة المستخدم، الإكمال التلقائي") .menu.active) {
event.preventDefault ()؛
}
})
.autocomplete ({
مصدر: وظيفة (طلب والاستجابة) {
$ .getJSON ( "Search.php"، {
المدى: extractLast (request.term)
} والاستجابة)؛
}،
البحث: وظيفة () {
// الحد الأدنى مخصص طول فار المدى = extractLast (this.value)؛
إذا (term.length <2) {
عودة كاذبة.
}
}،
التركيز: وظيفة () {
// منع الحصول على القيم إدراج التركيز عودة كاذبة.
}،
حدد: وظيفة (الحدث، واجهة المستخدم) {
حيث فار = الانقسام (this.value)؛
// إزالة terms.pop المدخلات الحالية ()؛
// إضافة terms.push الخيار المحدد (ui.item.value)؛
// إضافة نائبا، إضافة فاصلة في نهاية terms.push الفضاء + ( "")؛
this.value = terms.join ( "،")؛
عودة كاذبة.
}
})؛
})؛
</ script>
</ رئيس>
<body>
<فئة الدرجة = "واجهة المستخدم القطعة">
<تسمية ل= "الطيور"> الطيور: </ التسمية>
<إدخال معرف = "الطيور" حجم = "50">
</ div>
</ الجسم>
</ HTML>
البيانات عن بعد JSONP مصدر
عند كتابة الأحرف في حقل النص، مكونات الإكمال التلقائي تعطي نتائج المشورة. في هذا المثال، عند كتابة اثنين من أحرف على الأقل في حقل النص، فإنه سيتم عرض اسم المدينة ذات الصلة.
في هذا المثال، مصدر البيانات geonames.org خدمة ويب . على الرغم من أن اختيار حقل النص بعد العنصر هو اسم المدينة، ولكن سيتم عرض المزيد من المعلومات من أجل العثور على الإدخال الصحيح. يمكن أيضا أن تكون البيانات الاستدعاء، يتم عرض النتائج في المربع أدناه.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم لصناعة السيارات في إكمال (الإكمال التلقائي) - JSONP مصدر البيانات البعيد </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
.ui-الإكمال التلقائي التحميل {
خلفية: رابط الأبيض ( 'الصور / واجهة المستخدم anim_basic_16x16.gif') يمين الوسط بعدم تكرار.
}
#city {عرض: 25em؛}
</ النمط>
<script>
$ (وظيفة () {
سجل وظيفة (الرسالة) {
$ ( "<div>") .text (الرسالة) .prependTo ( "#log")؛
$ ( "#log") .scrollTop (0)؛
}
$ ( "#city") .autocomplete ({
مصدر: وظيفة (طلب والاستجابة) {
.ajax $ ({
رابط: "http://ws.geonames.org/searchJSON"
نوع البيانات: "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.item؟
"المحددة" + ui.item.label:
"تحديد أي شيء، كان إدخال" + this.value)؛
}،
فتح: وظيفة () {
$ (هذا) .removeClass ( "واجهة المستخدم الزاوية للجميع") .addClass ( "واجهة المستخدم الركن العلوي")؛
}،
وثيقة: وظيفة () {
$ (هذا) .removeClass ( "واجهة المستخدم الركن العلوي") .addClass ( "واجهة المستخدم الزاوية للجميع")؛
}
})؛
})؛
</ script>
</ رئيس>
<body>
<فئة الدرجة = "واجهة المستخدم القطعة">
<تسمية ل= "المدينة"> مدينتك: </ التسمية>
<إدخال معرف = "المدينة">
مدعوم من <a href="http://geonames.org" target="_blank"> لgeonames.org </A>
</ div>
<فئة الدرجة = "واجهة المستخدم القطعة" على غرار = "هامش قمة: 2em؛ الخط بين أفراد الأسرة: ارييل">
النتائج:
<شعبة معرف = "تسجيل" على غرار = "الارتفاع: 200px؛ العرض: 300px؛ تجاوز: السيارات؛" الطبقة = "واجهة المستخدم القطعة المحتوى"> </ div>
</ div>
</ الجسم>
</ HTML>
مصدر البيانات عن بعد
عند كتابة الأحرف في حقل النص، مكونات الإكمال التلقائي تعطي نتائج المشورة. في هذا المثال، عند كتابة اثنين من أحرف على الأقل في حقل النص، فإنه سيتم عرض أسماء ذات الصلة من الطيور.
في هذا المثال، يتم إرجاع مصدر البيانات JSON النصي البيانات من جانب الخادم لتحديد خيارات مصدر بسيطة. وبالإضافة إلى ذلك، يتم تعيين الخيار MINLENGTH إلى 2، لتجنب الاستعلام يعود الكثير من النتائج، حدد الحدث لعرض بعض ردود الفعل.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم لصناعة السيارات في إكمال (الإكمال التلقائي) - مصدر البيانات البعيد </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
.ui-الإكمال التلقائي التحميل {
خلفية: رابط الأبيض ( 'الصور / واجهة المستخدم anim_basic_16x16.gif') يمين الوسط بعدم تكرار.
}
</ النمط>
<script>
$ (وظيفة () {
سجل وظيفة (الرسالة) {
$ ( "<div>") .text (الرسالة) .prependTo ( "#log")؛
$ ( "#log") .scrollTop (0)؛
}
$ ( "#birds") .autocomplete ({
مصدر: "search.php"
MINLENGTH: 2،
حدد: وظيفة (الحدث، واجهة المستخدم) {
تسجيل (ui.item؟
"المحددة" + ui.item.value + "ويعرف أيضا باسم" + ui.item.id:
"تحديد أي شيء، كان إدخال" + this.value)؛
}
})؛
})؛
</ script>
</ رئيس>
<body>
<فئة الدرجة = "واجهة المستخدم القطعة">
<تسمية ل= "الطيور"> الطيور: </ التسمية>
<إدخال معرف = "الطيور">
</ div>
<فئة الدرجة = "واجهة المستخدم القطعة" على غرار = "هامش قمة: 2em؛ الخط بين أفراد الأسرة: ارييل">
النتائج:
<شعبة معرف = "تسجيل" على غرار = "الارتفاع: 200px؛ العرض: 300px؛ تجاوز: السيارات؛" الطبقة = "واجهة المستخدم القطعة المحتوى"> </ div>
</ div>
</ الجسم>
</ HTML>
التخزين المؤقت البعيد
عند كتابة الأحرف في حقل النص، مكونات الإكمال التلقائي تعطي نتائج المشورة. في هذا المثال، عند كتابة اثنين من أحرف على الأقل في حقل النص، فإنه سيتم عرض أسماء ذات الصلة من الطيور.
لتحسين الأداء، إضافة هنا ذاكرة التخزين المؤقت المحلية قليلة، حالات أخرى من مصادر البيانات البعيدة مماثلة. هنا، حفظ فقط على مخبأ للاستعلام، ويمكن تمديد ذاكرة التخزين المؤقت إلى قيم متعددة، كل دخول هو القيمة.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم لصناعة السيارات في إكمال (الإكمال التلقائي) - الكاش عن بعد </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
.ui-الإكمال التلقائي التحميل {
خلفية: رابط الأبيض ( 'الصور / واجهة المستخدم anim_basic_16x16.gif') يمين الوسط بعدم تكرار.
}
</ النمط>
<script>
$ (وظيفة () {
مخبأ فار = {}؛
$ ( "#birds") .autocomplete ({
MINLENGTH: 2،
مصدر: وظيفة (طلب والاستجابة) {
فار المدى = request.term.
إذا (المدى في ذاكرة التخزين المؤقت) {
استجابة (مخبأ [المدى])؛
العودة؛
}
$ .getJSON ( "Search.php"، طلب، وظيفة (بيانات، والوضع، XHR) {
مخبأ [المدى] = البيانات؛
استجابة (البيانات)؛
})؛
}
})؛
})؛
</ script>
</ رئيس>
<body>
<فئة الدرجة = "واجهة المستخدم القطعة">
<تسمية ل= "الطيور"> الطيور: </ التسمية>
<إدخال معرف = "الطيور">
</ div>
</ الجسم>
</ HTML>
نتيجة للتمرير
عند عرض قائمة طويلة من الخيارات، يمكنك ببساطة وضع الحد الأقصى للطول لمنع القائمة الإكمال التلقائي لعرض القائمة أيضا. حاول كتابة "أ" أو "ليالي" للحصول على النتيجة من قائمة تمرير طويلة.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم لصناعة السيارات في إكمال (الإكمال التلقائي) - نتيجة تمرير </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
.ui-الإكمال التلقائي {
الحد الأقصى للطول: 100px؛
تجاوز ذ: لصناعة السيارات.
/ * منع شريط التمرير الأفقي * /
تجاوز-س: مخفي.
}
/ * IE 6 لا يدعم كحد أقصى الارتفاع
* نحن نستخدم بدلا من الارتفاع، ولكن هذا سيجبر دائما ما يتم عرض القائمة كما ذروة * /
* الاكواد .ui-الإكمال التلقائي {
الطول: 100px؛
}
</ النمط>
<script>
$ (وظيفة () {
availableTags فار = [
"أكشن"،
"ابليسكريبت"
"الحية"،
"BASIC"،
"C"،
"C ++"
"كلوجر"
"كوبول"
"كولد فيوجن"،
"إرلانج"
"فورتران"،
"رائع"،
"هاسكل"،
"جافا"،
"جافا سكريبت"،
"يسب"
"بيرل"،
"بي إتش بي"،
"بايثون"،
"روبي"،
"سكالا"،
"خطة"
].
$ ( "#tags") .autocomplete ({
مصدر: availableTags
})؛
})؛
</ script>
</ رئيس>
<body>
<فئة الدرجة = "واجهة المستخدم القطعة">
<تسمية ل= "العلامات"> العلامة: </ التسمية>
<إدخال معرف = "العلامات">
</ div>
</ الجسم>
</ HTML>
بيانات XML
هذا المثال يوضح كيفية الحصول على بعض البيانات XML ويستخدم أسلوب مسج لحلها وتقديمها إلى الإكمال التلقائي كمصدر للبيانات.
هذا المثال أن تستخدم أيضا حل XML إشارة مصدر بيانات الاستشعار عن بعد - تحليل يحدث في كل طلب مصدر الاستدعاء.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم لصناعة السيارات في إكمال (الإكمال التلقائي) - بيانات XML </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
.ui-الإكمال التلقائي التحميل {خلفية: رابط الأبيض ( 'الصور / واجهة المستخدم anim_basic_16x16.gif') يمين الوسط عدم تكرار؛}
</ النمط>
<script>
$ (وظيفة () {
سجل وظيفة (الرسالة) {
$ ( "<div />") .text (الرسالة) .prependTo ( "#log")؛
$ ( "#log") .attr ( "ScrollTop"، 0)؛
}
.ajax $ ({
رابط: "london.xml"
نوع البيانات: "أكس"،
نجاح: وظيفة (xmlResponse) {
فار = البيانات $ ( "geoname"، xmlResponse) .MAP (وظيفة () {
العودة {
القيمة: $ ( "اسم"، هذا) .text () + "،" +
($ .trim ($ ( "COUNTRYNAME"، هذا) .text ()) || "(البلد غير معروف)")،
معرف: $ ( "geonameId"، هذا) .text ()
}؛
.}) التسجيل ()؛
$ ( "#birds") .autocomplete ({
المصدر: البيانات،
MINLENGTH: 0،
حدد: وظيفة (الحدث، واجهة المستخدم) {
تسجيل (ui.item؟
"المحددة" + ui.item.value + "، geonameId:" + ui.item.id:
"تحديد أي شيء، كان إدخال" + this.value)؛
}
})؛
}
})؛
})؛
</ script>
</ رئيس>
<body>
<فئة الدرجة = "واجهة المستخدم القطعة">
<تسمية ل= "الطيور"> لندن المباراة: </ التسمية>
<إدخال معرف = "الطيور">
</ div>
<فئة الدرجة = "واجهة المستخدم القطعة" على غرار = "هامش قمة: 2em؛ الخط بين أفراد الأسرة: ارييل">
النتائج:
<شعبة معرف = "تسجيل" على غرار = "الارتفاع: 200px؛ العرض: 300px؛ تجاوز: السيارات؛" الطبقة = "واجهة المستخدم القطعة المحتوى"> </ div>
</ div>
</ الجسم>
</ HTML>