jquery autocompleter

ปลั๊กอินเติมข้อความอัตโนมัติ jQuery

สาธิต

ที่นี่: ตัวอย่างด้วยสี Crayola

การใช้งาน

การติดตั้ง

เวลา 12.00 น.:

npm install --save jquery-autocompleter

เส้นด้าย:

yarn add jquery-autocompleter

เพิ่มปลั๊กอินในโครงการของคุณ

• รวม jQuery:

   < script src =" http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js " > </ script >

• รวมรหัสของปลั๊กอิน:

   <!-- Styles -->
  < link rel =" stylesheet " href =" css/jquery.autocompleter.css " />
  
  <!-- Scripts -->
  < script src =" js/jquery.autocompleter.min.js " > </ script >

• เรียกปลั๊กอิน:

   $ ( "input" ) . autocompleter ( {
    /* options */
  } ) ; 

ตัวอย่าง

• URL ระยะไกล

   $ ( function ( ) {
    $ ( "input" ) . autocompleter ( { source : "path/to/get_data_request" } ) ;
  } ) ;

• ธรรมดา

   var data = [
    { value : 1 , label : "one" } ,
    { value : 2 , label : "two" } ,
    { value : 3 , label : "three" } ,
  ] ;
  
  $ ( function ( ) {
    $ ( "input" ) . autocompleter ( { source : data } ) ;
  } ) ; 

ตัวเลือก

โปรแกรมเติมข้อความอัตโนมัติมีตัวเลือกดังต่อไปนี้:

ชื่อ	พิมพ์	คำอธิบาย	แพ้
แหล่งที่มา	STR, วัตถุ	URL ไปยังเซิร์ฟเวอร์หรือวัตถุในเครื่อง	โมฆะ
เป็นท้องถิ่น	บูล	แยกวิเคราะห์การตอบสนองระยะไกลเป็นแหล่งในเครื่อง	เท็จ
ว่างเปล่า	บูล	เปิดตัวหากค่าว่างเปล่า	จริง
ขีด จำกัด	ภายใน	จำนวนผลลัพธ์ที่จะแสดง	10
นาทีความยาว	ภายใน	ความยาวขั้นต่ำสำหรับการเติมข้อความอัตโนมัติ	0
ล่าช้า	ภายใน	ไม่กี่มิลลิวินาทีในการเลื่อนการร้องขอ	0
คลาสแบบกำหนดเอง	อาร์เรย์	อาร์เรย์ที่มีคลาสที่กำหนดเองสำหรับองค์ประกอบเติมข้อความอัตโนมัติ	-
แคช	บูล	บันทึกข้อมูล xhr ไปยัง localStorage เพื่อหลีกเลี่ยงการร้องขอซ้ำ	จริง
แคชหมดอายุ	ภายใน	อายุการใช้งานข้อมูล localStorage เป็นวินาที (0 เพื่อปิดใช้งานแคชหมดอายุ)	86400
โฟกัสOpen	บูล	เปิดตัวเติมข้อความอัตโนมัติเมื่ออินพุตได้รับการโฟกัส	จริง
ป้อนเลือก	บูล	อนุญาตให้เลือกโดยใช้ปุ่ม Enter	จริง
คำใบ้	บูล	เพิ่มคำแนะนำในการป้อนข้อมูลด้วยป้ายกำกับแรกที่ตรงกัน ควรติดตั้งรูปแบบที่ถูกต้อง	เท็จ
เลือกก่อน	บูล	หากตั้งค่าเป็น true องค์ประกอบแรกในรายการเติมข้อความอัตโนมัติจะถูกเลือกโดยอัตโนมัติ ไม่ต้องสนใจหากเปิด changeWhenSelect ไว้	เท็จ
เปลี่ยนเมื่อเลือก	บูล	อนุญาตให้เปลี่ยนค่าอินพุตโดยใช้การนำทางด้วยปุ่มลูกศรในรายการเติมข้อความอัตโนมัติ	จริง
ไฮไลท์การแข่งขัน	บูล	ตัวเลือกนี้กำหนดการตัดแท็ก <strong> สำหรับการจับคู่ในผลลัพธ์การเติมข้อความอัตโนมัติ	เท็จ
ละเว้นKeyCode	อาร์เรย์	อาร์เรย์ที่มีรหัสคีย์ที่ละเว้น โดยค่าเริ่มต้น: 9, 13, 17, 19, 20, 27, 33, 34, 35, 36, 37, 39, 44, 92, 113, 114, 115, 118, 119, 120, 122, 123, 144, 145	-
ฉลากแบบกำหนดเอง	STR	ชื่อของคุณสมบัติของวัตถุที่จะใช้เป็นป้ายกำกับ	เท็จ
ค่าที่กำหนดเอง	STR	ชื่อของคุณสมบัติของวัตถุที่จะใช้เป็นค่า	เท็จ
บนก่อนส่ง	การทำงาน	ฟังก์ชันนี้ถูกทริกเกอร์ก่อนคำขอ ajax	$.noop
บนก่อนแสดง	การทำงาน	ฟังก์ชันนี้จะถูกทริกเกอร์เมื่อรายการพร้อมที่จะแสดงรายการ	$.noop
หนึ่งว่างเปล่า	การทำงาน	หากรายการข้อมูลว่างเปล่า ให้เรียกใช้ฟังก์ชันนี้	$.noop
บนรายการ	การทำงาน	ฟังก์ชันนี้จะถูกทริกเกอร์เมื่อมีการเตรียมแต่ละรายการให้แสดง	$.noop
onListOpen	การทำงาน	ฟังก์ชันนี้จะถูกทริกเกอร์เมื่อมีการแสดงรายการ	$.noop
onListClose	การทำงาน	ฟังก์ชันนี้จะถูกทริกเกอร์เมื่อมีการซ่อนรายการ	$.noop
ก่อนเปิดตัว	การทำงาน	เหตุการณ์ถูกทริกเกอร์ก่อนคำขอใหม่ (รวมถึงแคชในเครื่อง)	$.noop
แม่แบบ	STR	เทมเพลตที่กำหนดเองสำหรับรายการ ตัวอย่างเช่น: <span>{{ label }} is {{ customPropertyFromSource }}</span> เทมเพลตต่อ .autocompleter-item	เท็จ
ชดเชย	STR	ชดเชยการตอบสนองแหล่งที่มา เช่น: "response.items.posts" @deprecated ใช้ format แทน	เท็จ
รูปแบบ	การทำงาน	จัดรูปแบบเพย์โหลดการตอบสนองเพื่อส่งคืนข้อมูลต้นฉบับ	โมฆะ
รวมกัน	การทำงาน	ส่งกลับวัตถุที่ขยายข้อมูลอาแจ็กซ์ มีประโยชน์ถ้าคุณต้องการส่งผ่านตัวเลือกเซิร์ฟเวอร์เพิ่มเติม	$.noop
โทรกลับ	การทำงาน	เลือกฟังก์ชันโทรกลับค่า อาร์กิวเมนต์: value index object	$.noop

วิธีการ

เปลี่ยนตัวเลือกหลังจากกำหนดปลั๊กอินแล้ว

 $ ( "#input" ) . autocompleter ( "option" , data ) ;

ตัวอย่างเช่น:

 $ ( "#input" ) . autocompleter ( "option" , {
  limit : 5 ,
  template :
    '<img src="{{ image }}" alt="Image for autocompleter list item" /> {{ label }}' ,
} ) ; 

เปิดรายการ

 $ ( "#input" ) . autocompleter ( "open" ) ; 

ปิดรายการ

 $ ( "#input" ) . autocompleter ( "close" ) ; 

ทำลายปลั๊กอิน

 $ ( "#input" ) . autocompleter ( "destroy" ) ; 

ล้างแคชทั้งหมด

 $ . autocompleter ( "clearCache" ) ; 

ตั้งค่าเริ่มต้น

 $ . autocompleter ( "defaults" , {
  customClass : "myClassForAutocompleter" ,
} ) ; 

อีกตัวอย่างหนึ่ง

ระบบเติมข้อความอัตโนมัติสำหรับการป้อนชื่อพร้อมแคช การไฮไลต์การจับคู่ และจำกัดผลลัพธ์ 5 รายการ การตอบสนองระยะไกลขึ้นอยู่กับเพศ:

มาร์กอัปแบบฟอร์ม

 < fieldset >
  < label > Male </ label >
  < input type =" radio " name =" gender " value =" male " checked =" checked " />

  < label > Female </ label >
  < input type =" radio " name =" gender " value =" female " />

  < label > Other </ label >
  < input type =" radio " name =" gender " value =" other " />

  < label > First Name </ label >
  < input type =" text " name =" firstname " id =" firstname " />
</ fieldset > 

รหัส

 $ ( function ( ) {
  $ ( "#firstname" ) . autocompleter ( {
    source : "https://EXAMPLE_API_ENDPOINT.com/api/search/name" ,
    limit : 5 ,
    cache : true ,
    combine : function ( params ) {
      var gender = $ ( "input:radio[name=gender]:checked" ) . val ( ) ;

      // passing params to match endpoint
      return {
        q : params . query ,
        count : params . limit ,
        gender : gender ,
      } ;
    } ,
    format : function ( data ) {
      // map response data to match autocompleter
      return data . entries . map ( function ( item ) {
        return {
          label : item . name ,
          value : item . slug ,
        } ;
      } ) ;
    } ,
    callback : function ( value , index , object ) {
      console . log (
        "Value " + value + " are selected (with index " + index + ")."
      ) ;
      console . log ( object ) ;
    } ,
  } ) ;
} ) ; 

มาร์กอัป

div (node) -> ul (list) -> li (item)

 < div class =" autocompleter " id =" autocompleter-1 " >
  < ul class =" autocompleter-list " >
    < li class =" autocompleter-item " > First </ li >
    <!-- ... -->
    < li class =" autocompleter-item " > Last </ li >
  </ ul >
</ div >