สไตล์ของฉันมาแนะนำการเรนเดอร์ก่อน หากคุณรู้สึกว่ามันค่อนข้างดีโปรดดูรหัสการใช้งาน
อย่าพูดเรื่องไร้สาระและดูลำดับชั้นของ Div ก่อน
<!-สามารถระบุ div นอกสุดได้ตลอดเวลาเพื่อกำหนดความกว้างขององค์ประกอบลูก-> <div> <!-ฉลากฟอร์มเพิ่มข้อความให้ข้อความ-> <label for = ""> การค้นหาข้อความเต็ม </label> <! name = "Hint-Search" value = "" placeHolder = "เลือกคำหลักหรือกดแท็บหรือป้อนเพื่อแยกคำหลัก"> </div> <!-รวมคอลัมน์รายการดรอปดาวน์-> <div> <!
สามารถอธิบายคำอธิบายประกอบโครงสร้าง DOM ได้อย่างชัดเจนลองมาดู CSS
* {การปรับขนาดกล่อง: border-box;}. คำใบ้-อินพุตสปา-สปานเนอร์ {ความกว้าง: 100%; พื้นหลัง-สี: #ffff; เส้นขอบ: 1px ของแข็ง #ccc; กล่อง-------แสดง 0 1px 1px rgba (0, 0, 0, 0.075); Middle; Border-Radius: 1px; Max-Width: 100%; Line-Height: 30px;}. คำแนะนำ-อินพุต-สปานเนอร์. แท็ก {padding: -2px; font-size: 12px; font-family: serif ;; margin-right: 2px; {font-size: 10px; padding: 4px 6px; border: none; text-shadow: none; border-radius: 3px; font-weight: 200;}. ฉลาก primary {พื้นหลัง: #2693ff; color: White;}. hint-input-span-container 2px; สี: สีขาว;}. แท็ก [data-role = "ลบ"] {margin-left: 2px; เคอร์เซอร์: pointer;} อินพุต [name = 'คำใบ้-ค้นหา'] {border: none; box-shadow: ไม่มี; Absolute; Width: 100px; Max-Height: 120px; พื้นหลัง-สี: #ffff; overflow: auto; แสดง: ไม่มี; z-index: 9999;}. คำแนะนำ-ul {การกำหนดข้อความ: ไม่มี; list-style-type: none; padding-left: 5px; 4px;}. คำแนะนำ-ul li: โฮเวอร์ {พื้นหลัง-สี: #eee;}มันเป็นสิ่งสำคัญในการตั้งค่าการปรับขนาดเส้นขอบ: กล่องชายแดนใน CSS สถานที่ให้บริการนี้สามารถสร้างช่องว่างภายในและการคำนวณเส้นขอบในความกว้าง
.hint-input-span-container มันเป็นสิ่งสำคัญในการตั้งค่าการแสดงผลเป็น inline-block มีรายการของแท็ก
.hint-block ตั้งค่า z-index เป็น 9999 เพื่อให้แน่ใจว่าจะแสดงที่ปลายด้านหน้าและตำแหน่งเป็นแน่นอนเพื่อให้แน่ใจว่าตำแหน่งของมัน
คนอื่น ๆ ทั้งหมดสามารถปรับได้ตามความต้องการของคุณ
มาดูรหัส JS ด้านล่าง
$ (function () {// json data packet var data = {data: ["123", "Hello Beijing", "Beijing Welcome", "Beijing Good", "Ocean", "Ocean Guangli Bureau", "I Ocean", "ฉันประหลาดใจ", "ฉัน Lalala" Mountain "," Ethiopia "," Ibaka "," Bibi "]}; // รับวัตถุ DOM ที่ต้องเรียกหลายครั้งในภายหลัง var $ hintsearch = $ (" input [name = 'คำแนะนำ-ค้นหา'] "); var $ hintsearchContainer = $ (" คำแนะนำ $ (". HINT-UL"); // เพิ่มพจนานุกรม addDictionary (data.data, addullistener); // ตั้งค่าพจนานุกรมรายการความกว้าง sethintsearchContainerWidth (); // ใช้การตอบสนองต่อการปรับขนาดเหตุการณ์ $ (หน้าต่าง). โฟกัส $ hintsearch.focus (function () {animtedown ();}); // lost focus // set delay เพื่อฟังการคลิกการตอบสนอง $ hintsearch.blur (function () {settimeout (ฟังก์ชั่น () {animateup ();}, 200); ป้องกันไม่ให้เดือดและสลับโฟกัส $ hintsearch.keydown (ฟังก์ชั่น (e) {สวิตช์ (E.which) {กรณีที่ 9: กรณีที่ 13: {text var = $ hintsearch.val (); ถ้า (! $. trim (ข้อความ)) {$ hintsearch.val (""); e.preventdefault () {$ HINTSEARCH.BEFORE ('<span>' + ข้อความ + '<i data-role = "ลบ"> </i> <i> </i> </i> </span> '); addspanlistenr ();} // console.log ($ hintsearch.val ()); $ hintsearch.val (""); $ hintsearch.focus (); การจับคู่ // จับคู่เนื้อหาอินพุตใน LI หากรวมสตริงมันสามารถพบและส่งคืน // วิธีการค้นหาสามารถแก้ไขได้ด้วยตัวเอง data.data.filter (ฟังก์ชั่น (x) {return x.indexof (text)! = -1;}) ถ้า (tmparr.length === 0) {tmparr.push ("ไม่มีรายการที่ตรงกัน"); {สำหรับ (var i = 0; i <dataarr.length; i ++) {$ hintul.append ('<li>'+dataarr [i]+'</li>');} callback ();} // การอัปเดตเนื้อหาการค้นหา ฟังก์ชั่น immtedown () {$ hintblock.slidedown ('fast'). css ({'border': '1px solid #96c8da', 'border-top': '0px', 'box-shadow' RGBA (34,36,38, .15) '}); $ HINTSEARCHCONTAINER.CSS ({' Border ':' 1PX Solid #96C8DA ',' BORNDER-BOTTOM ':' 0PX ',' SWBATOM ') ฟังก์ชั่น animateup () {$ hintblock.slideup ('fast', function () {$ hintsearchcontainer.css ({'border': '1px solid #ccc'});});});} // ตรวจสอบว่ามันซ้ำกับฟังก์ชั่นอินพุต span "). แต่ละ (ฟังก์ชั่น () {ถ้า ($ .trim (ข้อความ) == $ .Trim ($ (นี่) .Text ())) {Flag = 1; return;}}); return Flag? true: false;} // ตั้งค่าคำใบ้-อินพุตสปาสแปน-คอนเนอร์ฟังก์ชัน sethintsearchContainerWidth () {var hint_width = $ hintsearchContainer.width () + 2 * parseint ($ hintsearchContainer.css ('padding-left' parseint ($ hintsearchcontainer.css ('ชายแดนซ้าย'). การจับคู่ (/[0-9]+/) [0]); $ hintblock.css ({'width': hint_width});} // การคลิก $ (this) .text (); ถ้า (! checkcontainerhas (ข้อความ)) {$ hintsearch.before ('<pan>' + ข้อความ + '<i data-Role = "ลบ"> </i> <i> </i> </i> </span>'); addspanlistenr (); addspanlistenr () {$ (". คำใบ้-อินพุตสปา-สแปน-คอนเนอร์"). มอบหมาย ("i", 'คลิก', ฟังก์ชั่น () {$ (นี่) .parent (). ลบ ();})}})การมุ่งเน้นไปที่การฟังเหตุการณ์และการดำเนินงานองค์ประกอบ DOM ซึ่งขึ้นอยู่กับ jQuery
ด้านบนเป็นวิธีการใช้งานแบบดึงลงหลายตัวเลือกของส่วนประกอบ UI ที่แนะนำโดยตัวแก้ไข (พร้อมฟังก์ชั่นการค้นหา) ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!