นี่เป็นหนึ่งในข้อเสียของรหัสการโพสต์: กล่องค้นหาเกือบจะเสียโดยชาวเน็ต! - - บางคนจงใจเข้าสู่ช่องว่างบางคนเข้ามาหรือ 1 = 1 บางคนตื่นตัวบางคนเข้ามาใน HTML ... และดูเหมือนว่าพวกเขาจะยังเล่นอยู่ดังนั้นปล่อยให้พวกเขาไปตราบใดที่พวกเขามีความสุข
ในโครงการมักใช้ฟังก์ชั่นการเสร็จสิ้นอัตโนมัติของกล่องอินพุตเช่นกล่องค้นหาเช่น Baidu และ Taobao: เมื่อผู้ใช้ป้อนตัวอักษรและคำหลักเริ่มต้นพื้นหลังจะส่งคืนรายการที่เกี่ยวข้องอย่างรวดเร็วและแสดงไปยังแผนกต้อนรับเพื่อให้ผู้ใช้เลือกและปรับปรุงประสบการณ์ผู้ใช้ แน่นอนว่าฟังก์ชั่นความสำเร็จของโครงการนี้ไม่สามารถเทียบได้กับเทคโนโลยีของผู้ผลิตรายใหญ่เหล่านี้ แต่ก็เพียงพอแล้วสำหรับการค้นหาในสถานที่
มีปลั๊กอินเสร็จอัตโนมัติสองตัวหลักที่เราได้ติดต่อกับ : Autocomplete และ TypeAhead ไซต์นี้ใช้ typeahead
jQueryui-autocomplete
Plug-in-bootstrap-3-typeahead เสร็จสมบูรณ์โดยอัตโนมัติ
คำอธิบายพารามิเตอร์ที่เกี่ยวข้อง:
ที่มา: ฟังก์ชั่น (แบบสอบถาม, กระบวนการ) {} แบบสอบถามแสดงถึงสตริงในกล่องอินพุตข้อความปัจจุบัน ในวิธีนี้ข้อมูลสามารถขอได้จากพื้นหลัง (วัตถุ JSON ในรูปแบบของอาร์เรย์) ผ่าน AJAX และจากนั้นวัตถุที่ส่งคืนจะถูกใช้เป็นพารามิเตอร์ของกระบวนการ
FormatItem : ฟังก์ชั่น (รายการ) {} วัตถุ JSON เฉพาะที่ส่งคืนข้อมูลจะถูกแปลงเป็นรูปแบบสตริงซึ่งใช้เพื่อแสดงในรายการพรอมต์และค่าที่ส่งคืนคือ: สตริง;
setValue : ฟังก์ชั่น (รายการ) {} เมื่อเลือกรายการในรายการพรอมต์ให้ตั้งค่าที่แสดงในกล่องป้อนข้อความและค่าที่ต้องได้รับจริง รูปแบบค่าส่งคืน: {'data-value': รายการ ["คุณสมบัติรายการของค่าที่แสดงในกล่องอินพุต"], 'ค่าจริง': รายการ ["คุณสมบัติรายการของค่าจริงที่ต้องได้รับ"]} ในภายหลังค่านี้สามารถรับได้ผ่านคุณสมบัติจริง
รายการ : จำนวนสูงสุดของชุดผลลัพธ์สำหรับพรอมต์เสร็จสิ้นอัตโนมัติค่าเริ่มต้น: 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-ypeahead.js"
รหัส HTML:
<form id = "searchform" role = "search" target = "_ blank" method = "get" action = "/search/index"> <div> <อินพุต type = "text" id = "คำค้นหา" ชื่อ = "คำค้นหา" data-provide = "typeahead" Autocomplete = "Off" id = "searchbtn"> ค้นหา </button> </form>
JS สำหรับการประมวลผลคำค้นหาที่เกี่ยวข้อง:
// การค้นหาเสร็จสมบูรณ์โดยอัตโนมัติ ลงทะเบียนกล่องค้นหาด้วยการเชื่อมโยงอัตโนมัติเหตุการณ์อัตโนมัติสมบูรณ์: ฟังก์ชั่น () {jQuery ('#searchwords'). typeAhead ({แหล่งที่มา: ฟังก์ชั่น (คำถาม, กระบวนการ) {// คำถามคือ jQuery.getJSON ('/search/getHotSearchItems' {return item.replace (/<a (.+?) <// a>/, "");การประมวลผลพื้นหลัง/การค้นหา/getHotSearchItems:
#region 2.0 jQuery typeahead ปลั๊กอินแบบอะซิงโครนัสได้รับการค้นหาคำที่ร้อนแรงและเสร็จสิ้นช่องค้นหาโดยอัตโนมัติ ActionResult GetHotSearchItems () /// <summary> /// 2.0 jQuery typeahead plug-insynchronously ได้รับการค้นหาคำร้อนและเสร็จสมบูรณ์โดยอัตโนมัติกล่องค้นหา >/// ///////////////////////////////////////////////// <returns> JSON </returns> ActionResult GetHotSearchItems () {// 2.1 รับคำค้นหาปัจจุบัน "การสืบค้น" String Query = คำขอ ["Query"]; // 2.2 การค้นหาคำศัพท์ Hot Word ของฟิลด์นี้ คอลเลกชันที่มีคำค้นหานี้จากฐานข้อมูลจัดเรียงตามการค้นหาและส่งคืนข้อมูลไปยัง typeahead.jslist <SearchRank> hotlist = hotService.getDatalistby (s => s.keyword.contains (แบบสอบถาม), s => s.Searchtimes); ถ้า (hotlist! = null) H.SearchTimes}). tolist (); arraylist list2 = new ArrayList (); int i = 1; foreach (รายการ var ใน list1) {list2.add (string.format ("<a class =" cat/"href =/"#/"> {0} </a> {1}" jsonRequestBehavior.allowget);} else {return json ("", jsonrequestbehavior.allowget);}} #endregionตอนนี้มาทำกันเถอะ