طريقة إكمال مربعات البحث تلقائيًا باستخدام المكونات الإضافية

هذه واحدة من عيوب الرموز النشر: يتم كسر مربع البحث تقريبًا بواسطة مستخدمي الإنترنت! ! ! يدخل بعض الأشخاص عمداً إلى مساحات ، يدخل بعض الأشخاص أو 1 = 1 ، وبعض الناس في حالة تأهب ، وبعض الناس يدخلون HTML ... ويبدو أنهم ما زالوا يلعبون ، لذلك دعهم يذهبون ، طالما أنهم سعداء.

في المشاريع ، غالبًا ما يتم استخدام وظيفة الإكمال التلقائي لمربع الإدخال ، تمامًا مثل مربعات البحث مثل Baidu و Taobao: عندما يدخل المستخدم الحرف الأولية والكلمة الرئيسية ، ستعود الخلفية بسرعة إلى الإدخالات ذات الصلة وعرضها على مكتب الاستقبال للمستخدمين لاختيار تجربة المستخدم وتحسينه. بطبيعة الحال ، فإن وظيفة إكمال هذا المشروع لا تشبه تقنية هؤلاء الشركات المصنعة الرئيسية ، لكنها أكثر من كافية للبحث في الموقع.

هناك نوعان من المكونات الإضافية الرئيسية التلقائية التي تواصلنا معها : الإكمال التلقائي و typeahead . يستخدم هذا الموقع TypeAhead.

jQueryui-autocomplete

الإكمال التلقائي المكون الإضافي في bootstrap-3-typeahead

وصف المعلمة ذات الصلة:

المصدر: وظيفة (استعلام ، العملية) {}. يمثل الاستعلام السلسلة في مربع إدخال النص الحالي. في هذه الطريقة ، يمكن طلب البيانات من الخلفية (كائن JSON في شكل صفيف) من خلال AJAX ، ثم يتم استخدام الكائن الذي تم إرجاعه كمعلمة للعملية ؛

formatiTem : function (item) {}. يتم تحويل كائن JSON المحدد الذي يقوم بإرجاع البيانات إلى تنسيق سلسلة ، والذي يتم استخدامه لعرضه في قائمة المطالبات ، وقيمة الإرجاع هي: String ؛

setValue : function (item) {}. عند تحديد عنصر في قائمة المطالبات ، قم بتعيين القيمة المعروضة في مربع إدخال النص والقيمة التي يجب الحصول عليها فعليًا. تنسيق قيمة الإرجاع: {'قيمة البيانات': العنصر ["خاصية العنصر من القيمة المعروضة في مربع الإدخال"] ، "القيمة الحقيقية": العنصر ["خاصية العنصر من القيمة الفعلية التي يجب الحصول عليها"] ، في وقت لاحق ، يمكن الحصول على هذه القيمة من خلال خاصية القيمة الحقيقية لصندوق إدخال النص ؛

العناصر : الحد الأقصى لعدد مجموعات النتائج لمطالبات الإكمال التلقائي ، الافتراضي: 8 ؛

Minlength: سيتم تنفيذ عملية المطابقة فقط عندما تصل السلسلة في مربع إدخال النص الحالي إلى قيمة الخاصية. الافتراضي: 1 ؛

التأخير : بعد تحديد عدد التأخير المللي ثانية ، يتم طلب البيانات من الخلفية لمنع الطلبات المتكررة من الخلفية من أن تكون ناتجة بشكل متكرر بسبب الإدخال السريع. الافتراضي: 500

الرمز المحدد كما يلي:

قدم أولاً ملف JS

 <script src = "~/scripts/jQuery -1.9.0.js"> </script> <script src = "~/scripts/bootstrap.js"> </script> <script src = "~/content/js/bootstrap3-typeahead.js

رمز HTML:

 <form id = "searchform" rol = "search" target = "_ blank" method = "get" action = "/search/index"> <viv> <input type = "text" id = "searchwords" name = "searchwords" data-provide = "typeahead" autocomplete = "Off" plationholder = "إدخال الكلمة الرئيسية للبحث عن" id = "searchbtn"> البحث </button> </purment>

JS لمعالجة شروط البحث ذات الصلة:

 // البحث تلقائيًا ؛ قم بتسجيل مربع البحث بحدث إتمام الجمعية التلقائية في الحدث التلقائي: الدالة () {jQuery ('#searchwords'). typeahead ({source: function (query ، process) {// query is the exprale jquery.getjson ('/search/gethotsearms' ، {"query": Query} {return item.replace (/<a (.+؟) <// a>/، "")

معالجة الخلفية/البحث/gethotsearchitems:

 #Region 2.0 JQuery TypeAhead Plug-in يحصل بشكل غير متزامن على الكلمات الساخنة ويكمل تلقائيًا مربع البحث ؛ ActionResult GethotsearchItems () /// <summary> /// 2.0 jQuery TypeAhead Plug-in لا يتوافق بشكل غير متزامن ، يتم تضمين كلمات البحث الساخنة بشكل غير متزامن ويكمل مربع البحث تلقائيًا /// <returns> json </ropresss> public actionresult gethotsearchitems () {// 2.1 احصل على مصطلح البحث الحالي "Query" Query = request ["Query"] تحتوي على مصطلح البحث هذا من قاعدة البيانات ، وفرزه عن طريق عمليات البحث ، وإرجاع البيانات إلى typeahead.jslist <SearchRank> hotlist = hotservice.getDatalistby (s => s.keyword.contains (Query) ، s => s.SearchTimes) ؛ if (hotlist! H.SearchTimes}). tolist () ؛ arraylist list2 = new ArrayList () ؛ int i = 1 ؛ foreach (var item in list1) {list2.add (string.format ("<a class =/" cat/"href =/"#/"> {0} </a> {1}" ، i ، i pitem.name) ؛ jsonrequestbehavior.allowget) ؛} آخر {return json ("" ، jsonrequestbehavior.allowget) ؛}} #endregion

دعونا نفعل ذلك الآن.