ขึ้นอยู่กับปลั๊กอิน bootstrap การเติมข้อความอัตโนมัติให้เสร็จสมบูรณ์โดยอัตโนมัติจัดเตรียมรหัสสคริปต์กรณีใช้และเซิร์ฟเวอร์พื้นหลัง (PHP) มีบางสิ่งที่ไม่ได้อธิบายไว้อย่างชัดเจนในข้อความต้นฉบับและฉันหวังว่ามันจะช่วยทุกคนได้
ก่อนอื่นฉันต้องโหลด bootstrap & jQuery ควรสังเกตว่าอาร์เรย์สองมิติที่ส่งคืนโดยแบ็กเอนด์นั้นสอดคล้องกับการโทรด้านล่างวิธีการจัดรูปแบบ
นอกจากนี้ข้อมูลที่ส่งคืนจะต้องเป็น Parsejson ก่อน! จดจำ.
คำอธิบายพารามิเตอร์ที่เกี่ยวข้อง:
ที่มา: ฟังก์ชั่น (แบบสอบถาม, กระบวนการ) {} แบบสอบถามแสดงถึงสตริงในกล่องอินพุตข้อความปัจจุบัน ในวิธีนี้ข้อมูลสามารถขอได้จากพื้นหลัง (วัตถุ JSON ในรูปแบบของอาร์เรย์) ผ่าน AJAX และจากนั้นวัตถุที่ส่งคืนจะถูกใช้เป็นพารามิเตอร์ของกระบวนการ
FormatItem: ฟังก์ชั่น (รายการ) {} วัตถุ JSON เฉพาะที่ส่งคืนข้อมูลจะถูกแปลงเป็นรูปแบบสตริงซึ่งใช้เพื่อแสดงในรายการพรอมต์และค่าที่ส่งคืนคือ: สตริง;
setValue: ฟังก์ชั่น (รายการ) {} เมื่อเลือกรายการในรายการพรอมต์ให้ตั้งค่าที่แสดงในกล่องป้อนข้อความและค่าที่ต้องได้รับจริง รูปแบบค่าส่งคืน: {'data-value': รายการ ["คุณสมบัติรายการของค่าที่แสดงในกล่องอินพุต"], 'ค่าจริง': รายการ ["คุณสมบัติรายการของค่าจริงที่ต้องได้รับ"]} ในภายหลังค่านี้สามารถรับได้ผ่านคุณสมบัติจริง
รายการ: จำนวนสูงสุดของชุดผลลัพธ์สำหรับพรอมต์เสร็จสิ้นอัตโนมัติค่าเริ่มต้น: 8;
MinLength: กระบวนการจับคู่จะดำเนินการเฉพาะเมื่อสตริงในกล่องอินพุตข้อความปัจจุบันถึงค่าคุณสมบัติ ค่าเริ่มต้น: 1;
ความล่าช้า: หลังจากระบุจำนวนมิลลิวินาทีล่าช้าข้อมูลจะถูกร้องขอจากพื้นหลังเพื่อป้องกันการร้องขอบ่อยครั้งจากพื้นหลังที่เกิดจากการป้อนข้อมูลที่รวดเร็ว ค่าเริ่มต้น: 500
ขึ้นอยู่กับปลั๊กอิน bootstrap อัตโนมัติกรอกแบบฟอร์มกรอกแบบฟอร์มโดยอัตโนมัติรหัสมีดังนี้
1. รหัส
<script> $ ('#sim_iccid'). Autocomplete ({source: function (query, process) {var matchCount = this.options.items; // จำนวนสูงสุดของชุดผลลัพธ์ที่อนุญาตคือ $ .get ("http://www.soyiyuan.com/update/", {"iccid": Query, "MatchCount": MatchCount}, ฟังก์ชั่น (respdata) {respdata = $ .parsejson (respdata); รายการ ["ICCID"]+"("+รายการ ["มือถือ"]+")";2. $ data เป็นอาร์เรย์สองมิติ
echo json_encode ($ data)
3. รูปแบบ JSON มาตรฐานที่ต้องส่งคืน
[รหัส] [{"ICCID": "12345678901234567890", "มือถือ": "1850000"}, {"ICCID": "12345785", "มือถือ": "1850001"}] [รหัส]
Bootstrap Autocomplete Control Autocomplete ถูกแปลงตามตัวควบคุมของ Bootstrap เนื่องจาก TypeAhead ไม่รองรับวัตถุที่ซับซ้อน
// รหัสตัวอย่างมีดังนี้: $ ('#AutocompleteInput'). Autocomplete ({Source: Function (Query, Process) {var matchCount = this.options.items; // ส่งคืนจำนวนสูงสุดของผลลัพธ์ $. post ("/bootstrap/region" กระบวนการ (respdata);}); {'data-value': item ["regionName"], 'ค่าจริง': รายการ ["regionCode"]};}}); $ ("#gobtn") คลิก (ฟังก์ชัน () {// รับค่าจริงของกล่องข้อความ var regionCode = $ ("#autocompleteInput"). attr ("ค่าจริง") || "หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน