Flexdatalist - ปลั๊กอินเติมข้อความอัตโนมัติด้วยการสนับสนุน
HTML5 ธาตุ ค่อนข้างมีประโยชน์ในการพัฒนาส่วนหน้าที่ทันสมัย ยังเป็นหนึ่งในองค์ประกอบเหล่านั้นที่นักพัฒนาซอฟต์แวร์หลายคนไม่รู้จัก.
มันทำงานบนช่องใส่ที่คุณสามารถ เปิดใช้งานค่าบางอย่างสำหรับอินพุตโดยอัตโนมัติ. การตั้งค่าเริ่มต้นนั้นโอเคและเราได้กล่าวถึงเคล็ดลับในการสร้างเอฟเฟกต์เจ๋ง ๆ ด้วยโปรแกรมบันทึกข้อมูลอัตโนมัติ.
อย่างไรก็ตามมันง่ายกว่ามาก ทำงานกับปลั๊กอิน เช่น Flexdatalist. มัน รองรับเบราว์เซอร์มากมาย และช่วยให้คุณ ปรับแต่งการออกแบบข้อมูลของคุณอย่างเต็มที่.
ไม่ใช่ทุกคนที่มีความต้องการคุณสมบัติการเติมข้อความอัตโนมัติและด้วย datalists HTML5 ดั้งเดิมคุณอาจไม่ต้องกังวลกับปลั๊กอิน อย่างไรก็ตาม Flexdatalist อาจเป็นสิ่งที่ดีที่สุดเพราะมัน สร้างตามพฤติกรรม datalist พื้นเมือง เพื่อเพิ่ม:
- รองรับการตอบสนองมือถือ
- คำอธิบายพิเศษสำหรับแต่ละรายการ
- ตัวเลือกสำหรับการเลือกหลายรายการในครั้งเดียว
- ตัวจัดการเหตุการณ์ที่กำหนดเอง
มัน ทั้งหมดขับเคลื่อนโดย jQuery, ดังนั้นคุณจะ ต้องการสำเนาของเวอร์ชันล่าสุด เพื่อให้ทำงานได้ มันยัง มาพร้อมกับสไตล์ชีท CSS ของตัวเอง ซึ่งคุณอาจต้องการรวมเป็นไฟล์ CSS เดียวเพื่อลดคำขอ HTTP.
คุณสามารถหา คำแนะนำการตั้งค่าแบบเต็ม ในหน้าสาธิตหลักซึ่งรวมถึง ดาวน์โหลดลิงค์ไปยังไฟล์ Flexdatalist.
มันง่ายมากที่จะตั้งค่าด้วย เพียงแค่บรรทัดเดียวของ JavaScript. โดยค่าเริ่มต้นปลั๊กอิน กำหนดเป้าหมายอินพุตทั้งหมดด้วยคลาส .flexdatalist, ดังนั้นเพียงแค่เพิ่มลงในรหัสของคุณควรจะเพียงพอที่จะเห็นผลลัพธ์.
คุณเพียงแค่เพิ่ม องค์ประกอบภายในฟิลด์อินพุตของคุณและ Flexdatalist จะจัดการส่วนที่เหลือ มันจะ จัดสไตล์รายการโดยอัตโนมัติ, รวมถึงข้อความอธิบายที่เป็นตัวเลือก.
วิธีที่ง่ายที่สุดในการเพิ่มข้อความพิเศษคือ ผ่านไฟล์ JSON ซึ่งคุณสามารถ แนบกับอินพุตของคุณผ่านแอ็ตทริบิวต์ data.
ตัวอย่างเช่นหากคุณตรวจสอบหน้าตัวอย่างของ Flexdatalist คุณจะพบ “ประเทศ” ช่องป้อนข้อมูลที่มีคุณสมบัติ ข้อมูลข้อมูล = 'countries.json'. สิ่งนี้อ้างอิงถึงไฟล์รีโมตนั้น เก็บข้อมูลดิบทั้งหมดจากภายนอก.
คุณมีฟิลด์เหล่านี้มากเกินไป ช้าหน้าเล็กน้อย. อย่างไรก็ตามฉันไม่สามารถจินตนาการได้ว่าไซต์จำนวนมากจะเรียกใช้มากกว่าหนึ่งในสองแบบฟอร์มดาต้าลิสต์เหล่านี้ในหน้าเดียวไม่ต้องพูดถึงแม้แต่กับปลั๊กอิน jQuery ยังค่อนข้างเร็ว.
ในการเริ่มต้นเพียง เยี่ยมชม repo GitHub และดาวน์โหลดสำเนา. ซึ่งรวมถึง ลิงค์ไปยังหน้าตัวอย่างหลัก ซึ่งยังมีเอกสารฉบับเต็มสำหรับการตั้งค่าตัวเลือก JavaScript และตัวอย่างโค้ดจำนวนมากเพื่อใช้งาน.
