react select search

กำลังมองหาผู้ดูแล

ก่อนอื่น ฉันอยากจะขอบคุณทุกคนสำหรับการสนับสนุนที่ยอดเยี่ยมตลอดหลายปีที่ผ่านมา นี่เป็นหนึ่งในโครงการโอเพ่นซอร์สโครงการแรกของฉันและยังเป็นโครงการแรกที่ประสบความสำเร็จอีกด้วย ฉันรู้สึกขอบคุณมากสำหรับทั้ง 33 คน! ผู้ร่วมให้ข้อมูล คงไม่สามารถดำเนินโครงการนี้ได้หากไม่มีคุณ

ปีที่แล้วมีเรื่องมากมายเกิดขึ้น ฉันมีลูกชายคนแรก ฉันใช้เวลาทำงานอิสระไม่กี่ครั้งและมีบริษัทสตาร์ทอัพสองสามแห่งที่เติบโตขึ้น สิ่งนี้ต้องใช้เวลาห่างจากโอเพ่นซอร์สและฉันรู้สึกว่าฉันไม่สามารถทำองค์ประกอบนี้ได้อย่างยุติธรรมอีกต่อไป อย่างน้อยก็ไม่ใช่ด้วยตัวเอง

ฉันยังคงเชื่อในส่วนประกอบการเลือกขนาดเล็กที่เร็วสุด ๆ และไม่มีการพึ่งพา หากมีใครที่ต้องการดูแลเรื่องนี้ร่วมกับฉัน โปรดติดต่อเพื่อหารือเกี่ยวกับขั้นตอนต่อไป ส่งอีเมลถึงฉันที่ [email protected] หรือติดต่อเราทาง Twitter

สาธิต · เริ่มต้นอย่างรวดเร็ว · กำหนดค่า · หัวขาด

คุณสมบัติ

• น้ำหนักเบา โดยไม่มีการพึ่งพาใดๆ
• สามารถเข้าถึงได้
• โหมดหัวขาด
• ฟังก์ชั่นการเลือก HTML พื้นฐานรวมถึงหลายรายการ
• ตัวเลือกการค้นหา/ตัวกรอง
• ตัวเลือกอะซิงโครนัส
• ใช้ตัวเรนเดอร์เพื่อเปลี่ยนมาร์กอัปและลักษณะการทำงาน
• รองรับคีย์บอร์ด
• ตัวเลือกกลุ่มที่มีชื่อกลุ่ม คุณสามารถค้นหาชื่อกลุ่มได้
• มีสไตล์ได้อย่างเต็มที่

ติดตั้ง

ติดตั้งด้วย npm ( npm i react-select-search ) หรือ Yarn ( yarn add react-select-search ) และนำเข้าเหมือนปกติ

เริ่มต้นอย่างรวดเร็ว

 import SelectSearch from 'react-select-search' ;

/**
 * The options array should contain objects.
 * Required keys are "name" and "value" but you can have and use any number of key/value pairs.
 */
const options = [
    { name : 'Swedish' , value : 'sv' } ,
    { name : 'English' , value : 'en' } ,
    {
        type : 'group' ,
        name : 'Group name' ,
        items : [
            { name : 'Spanish' , value : 'es' } ,
        ]
    } ,
] ;

/* Simple example */
< SelectSearch options = { options } value = "sv" name = "language" placeholder = "Choose your language" / >

สำหรับตัวอย่างเพิ่มเติม คุณสามารถดูได้ในไดเร็กทอรีเรื่องราว

คุณจะต้องมี CSS เพื่อให้ดูถูกต้อง ธีมตัวอย่างสามารถพบได้ใน style.css คุณยังสามารถนำเข้าได้:

 import 'react-select-search/style.css' 

ใช้กับ SSR

หากต้องการใช้กับ SSR คุณอาจจำเป็นต้องใช้บันเดิล commonjs (react-select-search/dist/cjs) หากคุณต้องการใช้ธีมตัวอย่าง (style.css) คุณต้องตรวจสอบว่าสคริปต์บิลด์ของคุณจัดการชื่อคลาสหรือไม่ เช่น ลดขนาดคลาส หากเป็นกรณีนี้ คุณสามารถใช้โมดูล CSS เพื่อรับชื่อคลาสจากไฟล์ style.css และนำไปใช้โดยใช้อ็อบเจ็กต์ className สามารถดูตัวอย่างได้ที่นี่และที่นี่https://react-select-search.com/?path=/story/custom--css-modules

โหมดโง่พร้อมตะขอ

หากคุณต้องการการควบคุมที่สมบูรณ์ (มากกว่าการกำหนดสไตล์และตัวเรนเดอร์แบบกำหนดเอง) คุณสามารถใช้ hooks เพื่อส่งข้อมูลไปยังส่วนประกอบของคุณเองและสร้างมันขึ้นมาเอง

 import React from 'react' ;
import { useSelect } from 'react-select-search' ;

const CustomSelect = ( { options , value , multiple , disabled } ) => {
    const [ snapshot , valueProps , optionProps ] = useSelect ( {
        options ,
        value ,
        multiple ,
        disabled ,
    } ) ;

    return (
        < div >
            < button { ... valueProps } > { snapshot . displayValue } < / button >
            { snapshot . focus && (
                < ul >
                    { snapshot . options . map ( ( option ) => (
                        < li key = { option . value } >
                            < button { ... optionProps } value = { option . value } > { option . name } < / button >
                        < / li >
                    ) ) }
                < / ul >
            ) }
        < / div >
    ) ;
} ; 

การกำหนดค่า

ด้านล่างนี้เป็นตัวเลือกทั้งหมดที่คุณสามารถส่งผ่านไปยังส่วนประกอบได้ จำเป็นต้องมีตัวเลือกที่ไม่มีค่าเริ่มต้น

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
ตัวเลือก	อาร์เรย์		ดูเอกสารตัวเลือกด้านล่าง
รับตัวเลือก	การทำงาน	โมฆะ	รับตัวเลือกผ่านการเรียกใช้ฟังก์ชัน สามารถคืนสัญญาสำหรับการใช้งานอะซิงก์ได้ ดูรับตัวเลือกเพิ่มเติม
ตัวเลือกตัวกรอง	อาร์เรย์	โมฆะ	อาร์เรย์ของฟังก์ชันที่ใช้ตัวเลือกที่กรองล่าสุดและคำค้นหา (ถ้ามี) ทำงานหลังจาก getOptions
ค่า	สตริงอาร์เรย์	โมฆะ	ค่าควรเป็นอาร์เรย์หากมีหลายโหมด
หลายรายการ	บูลีน	เท็จ	ตั้งค่าเป็นจริงหากคุณต้องการอนุญาตตัวเลือกที่เลือกหลายรายการ
ค้นหา	บูลีน	เท็จ	ตั้งค่าเป็นจริงเพื่อเปิดใช้งานฟังก์ชันการค้นหา
พิการ	บูลีน	เท็จ	ปิดใช้งานฟังก์ชันการทำงานทั้งหมด
ปิดOnSelect	บูลีน	จริง	กล่องเลือกจะเบลอตามค่าเริ่มต้นเมื่อเลือกตัวเลือก ตั้งค่านี้เป็นเท็จเพื่อป้องกันพฤติกรรมนี้
ดีเด้ง	ตัวเลข	0	จำนวน ms ที่ต้องรอจนกว่าจะเรียกรับตัวเลือกเมื่อค้นหา
ตัวยึดตำแหน่ง	เชือก	สตริงว่าง	แสดงหากไม่มีการเลือกตัวเลือกใดๆ และ/หรือเมื่อโฟกัสช่องค้นหาด้วยค่าว่าง
รหัส	เชือก	โมฆะ	รหัส HTML ในองค์ประกอบระดับบนสุด
เสร็จสิ้นอัตโนมัติ	สตริงเปิด/ปิด	ปิด	ปิดใช้งาน/เปิดใช้งานฟังก์ชันการทำให้สมบูรณ์อัตโนมัติในช่องค้นหา
โฟกัสอัตโนมัติ	บูลีน	เท็จ	โฟกัสอัตโนมัติเมื่อเลือก
ชื่อคลาส	เชือก, วัตถุ	เลือกช่องค้นหา	ตั้งค่าสตริงคลาสพื้นฐานหรือส่งผ่านฟังก์ชันเพื่อการควบคุมที่สมบูรณ์ Se ชื่อคลาสที่กำหนดเอง สำหรับข้อมูลเพิ่มเติม
แสดงผลตัวเลือก	การทำงาน	โมฆะ	ฟังก์ชั่นที่แสดงตัวเลือก ดูตัวเรนเดอร์ที่กำหนดเองสำหรับข้อมูลเพิ่มเติม
renderGroupHeader	การทำงาน	โมฆะ	ฟังก์ชั่นที่แสดงส่วนหัวของกลุ่ม ดูตัวเรนเดอร์ที่กำหนดเองสำหรับข้อมูลเพิ่มเติม
แสดงผลค่า	การทำงาน	โมฆะ	ฟังก์ชันที่แสดงค่า/ช่องค้นหา ดูตัวเรนเดอร์ที่กำหนดเองสำหรับข้อมูลเพิ่มเติม
ข้อความว่างเปล่า	โหนดตอบสนอง	โมฆะ	ตั้งค่าข้อความว่างสำหรับรายการตัวเลือกว่าง คุณสามารถจัดเตรียมฟังก์ชันเรนเดอร์โดยไม่มีอาร์กิวเมนต์แทนข้อความสตริงธรรมดาได้
เมื่อเปลี่ยน	การทำงาน	โมฆะ	ฟังก์ชั่นรับและจัดการการเปลี่ยนแปลงค่า
บนโฟกัส	การทำงาน	โมฆะ	โฟกัสการโทรกลับ
บนเบลอ	การทำงาน	โมฆะ	โทรกลับเบลอ

วัตถุตัวเลือก

ออบเจ็กต์ตัวเลือกสามารถมีคุณสมบัติและค่าใดก็ได้ที่คุณต้องการ สิ่งเดียวที่จำเป็นคือ name

คุณสมบัติ	พิมพ์	คำอธิบาย	ที่จำเป็น
ชื่อ	เชือก	ชื่อของตัวเลือก	ใช่
ค่า	เชือก	มูลค่าของตัวเลือก	ใช่ถ้าประเภทไม่ใช่ "กลุ่ม"
พิมพ์	เชือก	หากคุณตั้งค่าประเภทเป็น "กลุ่ม" คุณสามารถเพิ่มอาร์เรย์ของตัวเลือกที่จะจัดกลุ่มได้	เลขที่
รายการ	อาร์เรย์	อาร์เรย์ของออบเจ็กต์ตัวเลือกที่จะใช้หากประเภทถูกตั้งค่าเป็น "กลุ่ม"	ใช่ หากตั้ง type เป็น "กลุ่ม"
พิการ	บูลีน	ตั้งค่าเป็น true เพื่อปิดใช้งานตัวเลือกนี้	เลขที่

ชื่อคลาสที่กำหนดเอง

หากคุณตั้งค่าสตริงเป็นค่าแอตทริบิวต์ className ส่วนประกอบจะใช้สิ่งนั้นเป็นฐานสำหรับองค์ประกอบทั้งหมด หากคุณต้องการควบคุมชื่อคลาสอย่างสมบูรณ์คุณสามารถส่งวัตถุที่มีชื่อคลาสได้ มีคีย์ต่อไปนี้:

• คอนเทนเนอร์
• ค่า
• ป้อนข้อมูล
• เลือก
• ตัวเลือก
• แถว
• ตัวเลือก
• กลุ่ม
• ส่วนหัวของกลุ่ม
• ถูกเลือก
• คือการเน้น
• กำลังโหลด
• มีหลายรายการ
• มีโฟกัส

เรนเดอร์ที่กำหนดเอง

หาก CSS ยังไม่เพียงพอ คุณยังสามารถควบคุม HTML สำหรับส่วนต่างๆ ของส่วนประกอบได้อีกด้วย

โทรกลับ	อาร์กส์	คำอธิบาย
แสดงผลตัวเลือก	optionsProps: object, optionData: object, optionSnapshot: object, className: สตริง	ควบคุมการเรนเดอร์ตัวเลือก
renderGroupHeader	ชื่อ: สตริง	ควบคุมการแสดงผลของชื่อส่วนหัวของกลุ่ม
แสดงผลค่า	valueProps: วัตถุ, สแน็ปช็อต: วัตถุ, ชื่อคลาส: สตริง	ควบคุมการแสดงผลขององค์ประกอบค่า/อินพุต

จำเป็นต้องใช้ optionProps และ valueProps เพื่อให้ส่วนประกอบที่คุณแสดงผลทำงานได้ ตัวอย่างเช่น:

 < SelectSearch renderValue = { ( valueProps ) => < input { ... valueProps } / > } / >

Monkeypatch หากคุณต้องการ แต่อย่าลืมถอดอุปกรณ์ประกอบฉากที่สำคัญออก

optionSnapshot เป็นอ็อบเจ็กต์ที่มีสถานะของอ็อบเจ็กต์: { selected: bool, highlighted: bool }

รับตัวเลือก

คุณสามารถดึงข้อมูลตัวเลือกแบบอะซิงโครนัสด้วยคุณสมบัติ getOptions คุณสามารถคืนตัวเลือกได้โดยตรงหรือผ่านทาง Promise

 function getOptions ( query ) {
    return new Promise ( ( resolve , reject ) => {
        fetch ( `https://www.thecocktaildb.com/api/json/v1/1/search.php?s= ${ query } ` )
            . then ( response => response . json ( ) )
            . then ( ( { drinks } ) => {
                resolve ( drinks . map ( ( { idDrink , strDrink } ) => ( { value : idDrink , name : strDrink } ) ) )
            } )
            . catch ( reject ) ;
    } ) ;
}

ฟังก์ชันนี้จะทำงานในการอัปเดตคำค้นหาแต่ละครั้ง ดังนั้นคุณอาจต้องการจำกัดการดึงข้อมูล หากคุณคืนสัญญา คลาส is-loading จะถูกนำไปใช้กับองค์ประกอบหลัก ทำให้คุณมีโอกาสเปลี่ยนรูปลักษณ์ เช่น เพิ่มสปินเนอร์ fetching คุณสมบัติยังมีอยู่ในสแน็ปช็อตที่ส่งไปยังการเรียกกลับการเรนเดอร์ของคุณ

ผู้ร่วมให้ข้อมูล

ทำด้วยหินที่มีส่วนร่วม