Bootstrap 4 dropdown with search

Question

How to implement the data-live-search  true  in bootstrap 4 dropdown   Below link contained a good explanation  however it was for Bootstrap 3   Bootstrap 3 select

User · Answer

As of version 1 13 1 there is support for Bootstrap 4  https   developer snapappointments com bootstrap-select   The implementation remains exactly the same as it was in Bootstrap 3    add class  selectpicker  and data-live-search  true to your select add data-tokens to your options  The live search will look into these data-token element when performing the search    This is an example  taken from the site of the link above    lt select class  selectpicker  data-live-search  true  gt     lt option data-tokens  ketchup mustard  gt Hot Dog  Fries and a Soda lt  option gt     lt option data-tokens  mustard  gt Burger  Shake and a Smile lt  option gt     lt option data-tokens  frosting  gt Sugar  Spice and all things nice lt  option gt   lt  select gt    Live search for the search term  fro  will only leave the third option visible  because of the data-tokens  frosting     Don t forget to include the bootstrap-select CDN  css and  js in your project  I am very glad to see this live search become available again  because it comes in very handy when presenting large dropdown lists to the user

User · Answer

dropdown with search using bootstrap 4 4 0 version  x000D   x000D  function myFunction       document getElementById  myDropdown   classList toggle  show       function filterFunction       var input  filter  ul  li  a  i    input   document getElementById  myInput      filter   input value toUpperCase      div       document getElementById  myDropdown      a   div getElementsByTagName  a      for  i   0  i  lt      a length  i          txtValue   a i  textContent    a i  innerText      if  txtValue toUpperCase   indexOf filter   gt  -1          a i  style display             else         a i  style display    none               x000D   myInput     box-sizing  border-box    background-image  url  searchicon png      background-position  14px 12px    background-repeat  no-repeat    font-size  16px    padding  14px 20px 12px 45px    border  none    border-bottom  1px solid  ddd      dropdown-content     display  none    position  absolute    background-color   f6f6f6    min-width  230px    overflow  auto    border  1px solid  ddd    z-index  1      dropdown-content a     color  black    padding  12px 16px    text-decoration  none    display  block      dropdown a hover     background-color   ddd      show     display  block    x000D   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 4 1 css bootstrap min css  gt   lt script src  https   code jquery com jquery-3 4 1 slim min js  gt  lt  script gt   lt script src  https   cdn jsdelivr net npm popper js 1 16 0 dist umd popper min js  gt  lt  script gt   lt script src  https   stackpath bootstrapcdn com bootstrap 4 4 1 js bootstrap min js  gt  lt  script gt    lt div class  dropdown  gt     lt button onclick  myFunction    class  dropbtn  gt Dropdown lt  button gt     lt div id  myDropdown  class  dropdown-content  gt       lt input type  text  placeholder  Search    id  myInput  onkeyup  filterFunction    gt       lt a href   about  gt home lt  a gt       lt a href   base  gt contact lt  a gt      lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

I took the answer from PirateApp and made it reusable  If you include this script it will transform all selects with the class   dropdown  to searchable dropdowns   x000D   x000D      dropdown   each function index  dropdown         Find the input search box   let search     dropdown  find   search         Find every item inside the dropdown   let items     dropdown  find   dropdown-item         Capture the event when user types into the search box     search  on  input   function         filter   search  val   trim   toLowerCase               For every word entered by the user  check if the symbol starts with that word     If it does show the symbol  else hide it   function filter word        let length   items length     let collection          let hidden   0     for  let i   0  i  lt  length  i            if  items i  value toString   toLowerCase   includes word               items i   show           else             items i   hide           hidden                        If all items are hidden  show the empty view     if  hidden     length            dropdown  find   dropdown empty   show          else           dropdown  find   dropdown empty   hide                   If the user clicks on any item  set the title of the button as the text of the item     dropdown  find   dropdown-menu   find   menuItems   on  click     dropdown-item   function           dropdown  find   dropdown-toggle   text   this  0  value         dropdown  find   dropdown-toggle   dropdown  toggle             x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 4 1 css bootstrap min css  rel  stylesheet    gt    lt script src  https   code jquery com jquery-3 4 1 slim min js  gt  lt  script gt   lt script src  https   cdn jsdelivr net npm popper js 1 16 0 dist umd popper min js  gt  lt  script gt   lt script src  https   stackpath bootstrapcdn com bootstrap 4 4 1 js bootstrap min js  gt  lt  script gt    lt div class  dropdown  gt     lt button class  btn btn-sm btn-secondary dropdown-toggle  type  button  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt          Benutzer      lt  button gt     lt div class  dropdown-menu  aria-labelledby  dropdown user  gt       lt form class  px-4 py-2  gt         lt input type  search  class  form-control search  placeholder  Suche    autofocus  autofocus  gt       lt  form gt       lt div class  menuItems  gt         lt input type  button  class  dropdown-item  type  button  value  Test1    gt         lt input type  button  class  dropdown-item  type  button  value  Test2    gt         lt input type  button  class  dropdown-item  type  button  value  Test3    gt       lt  div gt       lt div style  display none   class  dropdown-header dropdown empty  gt No entry found lt  div gt     lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

I could not find a standard control and had 0 intention to use a library such as bootstrap select so I custom made this widget  Bootstrap 4 allows you to add forms inside your dropdown which is what I have used here  I added a search box  used an input event to capture the text entered by the user inside the box  If the phrase entered by the user starts with the items inside the box  I show the items else I hide them  I also handle the click event on any item to change the text of the dropdown button   x000D   x000D    Initialize with the list of symbols x000D  let names     BTC   XRP   ETH   BCH   ADA   XEM   LTC   XLM   TRX   MIOTA   DASH   EOS   XMR   NEO   QTUM   BTG   ETC   ICX   LSK   XRB   OMG   SC   BCN   ZEC   XVG   BCC   DCN   BTS   PPT   DOGE   BNB   KCS   STRAT   ARDR   SNT   STEEM   USDT   WAVES   VEN   DGB   KMD   DRGN   HSR   KIN   ETN   GNT   REP   VERI   ETHOS   RDD   ARK   XP   FUN   KNC   BAT   DCR   SALT   DENT   ZRX   PIVX   QASH   NXS   ELF   AE   FCT   POWR   REQ   AION   SUB   BTM   WAX   XDN   NXT   QSP   MAID   RHOC   GAS   LINK   GBYTE   MONA   SAN   ENG   ICN   BTCD   SYS   XZC   VEE   POE   TNB   PAY   DGD   WTC   PAC   ZCL   GNO   LEND   CVC   RDN   BNT   NEBL   GXS   ACT   DBC   ENJ   STORM   STORJ   GAME   VTC   COB   UKG   SKY   CND   SMART   NAV   CNX   XBY   MED   CMT   RPX   PLR   CTR   BAY   BLOCK   ANT   R   UBQ   SNM   MCO   AST   MANA   SNGLS   ITC   RCN   FLASH   AMB   DATA   EDG   ATM   XPA   DNT   RLC   PART   ADX   ST   TRIG   EMC2   WABI   BRD   ETP   BURST   XSH   DTR   BCO   WINGS   FUEL   ZEN   NULS   EMC   MOON   PPP   MGO   XCP   SRN   1ST   TNT   PPC   MOD   LBC   THC   LA   DCT   MLN   UTK   SPANK   RISE   CLOAK   XAS   EDO   CDT   DPY   QRL   WGR   MTL   GTO   AGRS   GVT   PRL   VIA   ADT   GRS   COSS   AEON   GRID   YOYOW   SHIFT   HST   VOX   MTH   INK   FTC   XSPEC   NYC   NLG   CFI   PRE   TRST   VIB   LUN   BNTY   SLS   GUP   EVX   SNOV   DLT   UNITY   JINN   MER   ECN   PURA   MINT   NLC2   POT   ZSC   TKN   HMQ   NMC   WRC   VIBE   AMP   DIME   PEPECASH   BITCNY   RVT   PPY   PASC   DAT   PRO   TIX   ION   BCPT   BLK   TAAS   COLX   NET   DMD   IOC   AIR   MDA   PAYX   MNX   STX   BITB   SIB   IXT   XEL   NMR   LRC   DRT   GRC   LMC   CRW   ELIX   HEAT   MSP   EXP   FAIR   XMY   SLR   OMNI   NEU   GOLOS   MUE   BTX   PHR   FLIXX   ONION   DIVX   HVN   PBL   OAX   XWC   MUSIC   ECC   BOT   ATB   DOVU   EAC   ARN   PKT   NEOS   ART   KICK   LKK   XRL   RADS   VRC   OK   VOISE   CREDO   POLL   SPRTS   TIPS   LINDA   PST   FLDC   NSR   PLBT   LOC   RBY   NXC   DBET   ZOI   HUSH   TGT   CAG   SBD   ALIS   PTOY   ECOB   XLR   COVAL   MYST   SWT   BIS   AVT   SNC   GCR   GAM   PINK   PRG   XNN   BLUE   QAU   BCAP   IFT   INCNT   POSW   FLO   IOP   XST   DNA   DTB   TIME   GEO   BMC   ORME   PIX   OTN   MYB   SPF   QWARK   OCT   ENRG   CRED   CLAM   ESP   CARBON   HDG   NIO   GMT   WILD   SOAR   WCT   PND   CAT   STAK   ODN   RMC   ABY   CURE   ICOS   BSD   BITUSD   OBITS   BBR   FRST   XPM   BET   XVC   SEQ   BCY   TX   DOPE   CSNO   CANN   XMCC   SUMO   WISH   OXY   SPR   BTM   TFL   BQ   DICE   LEO   OPT   UNO   NVST   SPHR   SNRG   XUC   PRIX   DBIX   PFR   PLU   NTRN   ATMS   SSS   SYNX   ALQO   PTC   BWK   1337   HYP   2GIVE   ETT   SEND   UFR   ZNY   RUP   MEME   DOT   DRP   GLD   REAL   GBX   BELA   TCC   VSX   CRC   BRX   VRM   CRB   SXC   LUX   ITNS   XAUR   AUR   UNIT   QRK   INXT   UFO   B2B   IXC   AC   START   KORE   BRK   BTDX   SCL   XBC   PIRL   IND   TZC   RIC   ARC   BUZZ   QVT   ZEIT   NVC   INN   BDL   HBT   HGT   HWC   REX   NOTE   EXCL   BLITZ   PURE   NOBL   MTNC   VIVO   FYP   BBT   CHC   XTO   ERO   APX   EDR   USNBT   VSL   CRAVE   EBST   ASTRO   TOA   FOR   ADST   CHIPS   VTR   BTCZ   BPL   ERC   808   PZM   PDC   TRUST   XMG   ZEPH   DYN   LIFE   PUT   BON   ADC   BUN   XCN   UNIFY   SMART   TRC   CREA   MAG   EGC   CVCOIN   EQT   WDC   ANC   GOOD   HOLD   FRD   ATS   B3   ELTCOIN   LDOGE   HUC   TKS   DGPT   FJC   SWIFT   ATL   XFT   REC   ONG   XGOX   PKB   MXT   ELLA   CFT   KRB   AHT   MBRS   DNR   PING   RKC   RNS   DCY   EBTC   YOC   GIM   MZC   MCAP   ZRC   BLU   ETBS   EFL   FST   NET   FLT   CTX   ARC   GCC   XCPO   CBX   TTC   MOIN   PBT   HAT   GUN   BASH   NKA   IFLT   LINX   EBET   FLIK   DP   EPY   BLAS   DFT   MEC   ENT   SMC   OCL   RAIN   STA   KLN   GRE   V   UIS   ALT   EFYT   GRWI   XLC   FYN   STU   CMPCO   DAXX   CFD   DAR   MRT   UNB   OTX   LANA   KEK   PIPL   ZET   ZER   BYC   NDC   LGD   TRUMP   BTA   ADL   XPTX   INFX   ERC20   KURT   NUKO   DGC   FCN   BRO   INSN   XPD   VISIO   TRCT   FC2   CDN   ABJ   SGR   BBP   ZENI   HTC   DAI   WHL   RC   STRC   Q2C   TRI   ATOM   I0C   SIFT   SMLY   TES   MAC   ZCG   NETKO   KLC   ADZ   PROC   ICOO   DSR   TIT   XBL   CRM   LOG   ELE   PIGGY   SAGA   UTC   EMV   MNE   JNS   MCRN   CCT   CJ   ACC   CPC   TOKEN   WGO   XIOS   NYAN   BTCS   PASL   SIGT   MNC   AU   SKIN   TROLL   BITS   CNT   XCXT   GB   FUCK   HBN   8BIT   YTN   ROC   42   MAX   B    USC   SOON   SDRN   BTB   BPC   KOBO   RIYA   HODL   ORB   NTO   CCN   TRK   PXC   HPC   DEM   DIX   CNO   VIDZ   GAIA   DSH   RBT   ONX   OPAL   BRIT   CV2   HAL   RED   4CHN   C2   TKR   BUCKS   XPY   DRXNE   XHI   POS   ARI   TRDT   LBTC   SDC   BTCRED   CORG   WTT   TAG   ETG   ALTCOM   XJO   EVIL   KUSH   XRA   PCOIN   VOT   BCF   DDF   FNC   AMMO   BOLI   PAK   CCO   MARS   VLT   RLT   BIGUP   SPACE   MONK   CUBE   XCT   EGAS   PR   SUPER   RBX   UNY   TEK   LCP   EMD   GAP   BLC   ITI   NTWK   UNIC   JET   CCRB   GRIM   TSE   LTB   CAT   EOT   ICOB   CHESS   BTSR   COAL   MAD   888   AMS   KRONE   POST   MOJO   XGR   VAL   BITBTC   KAYI   WYV   ZZC   BSTY   DFS   MNM   PXI   EL   SLG   BERN   BTWTY   HERO   EBCH   CRX   DALC   QTL   SWING   STV   EUC   KED   TGC   VUC   MAR   ECASH   STARS   ERY   ZUR   ETHD   CMT   BAS   EREAL   SOIL   HNC   BRAT   GTC   IMS   CNNC   SHDW   BNX   ARG   SRC   GLT   BTG   PX   XVP   NRO   MAO   IETH   MOTO   XRE   MTLMC3   ICN   UNITS   HONEY   AERM   PHS   EVO   CACH   FUNC   SPEX   CON   HXX   HMP   XCO   EAGLE   611   ECO   DUO   GP   FLAX   XCRE   REE   ZMC   BITSILVER   CPN   SCORE   GPU   ACOIN   USDE   BUMBA   CXT   XCS         ARCO   RPC   MST   SPT   BLN   FIRE   JIN   SFC   BIP   TAJ   QCN   GPL   XBTS   RBIES   NEVA   RUPX   BOAT   VPRC   BENJI   MAY   SONG   OFF   ALL   CWXT   E4ROW   300   ASAFE2   BTPL   FUZZ   BSTAR   IMX   MSCN   LUNA   ICON   CTO   WBB   PLACO   COXST   SLEVIN   CTIC3   UET   CF   DRS   EXN   PEX   ARGUS   TYCHO   PIE   BITEUR   URC   PRX   PRC   PLNC   DOLLAR   BTQ   ROOFS   WOMEN   ATX   BRAIN   SOCC   GEERT   XBTC21   QBC   ZYD   LTCU   RIDE   VLTC   MILO   VIP   DIBC   LTCR   ACP   FXE   CRDNC   VRS   ELS   JS   AGLC   KNC   LIR   ZNE   LVPS   JOBS   HVCO   CTIC2   SANDG   XRC   CRTM   MGM   IBANK   NODC   P7C   VOLT   CREVA   TSTR   SLFI   NANOX   GSR   XNG   HMC   EBT   DGCS   DMB   ABN   ECA   PHO   GCN   VTA   PGL   RUSTBITS   YASH   INPAY   FIMK   ITT   CRYPT   FUNK   SHORTY   BLOCKPAY   POP   CASINO   LNK   LOT   MBI   METAL   ITZ   BXT   STS   AMBER   MRJA   BTCR   UNI   WAY   BRIA   SCRT   BLZ   GLC   GRT   BITZ   NEWB   AIB   MUT   SH   J   FRC   ISL   FLY   SLING   CYP   RMC   TALK   ICE   FRK   MEOW   WMC   SAC   VC   BITGOLD   YAC   ANTI   WORM   LEA   DLC   BOST   VEC2   WARP   GCC   URO   DES   FLVR   QBK   DBTC   BVC   MND   DRM   STEPS   BLRY   JWL   TOR   GBT   ARB   PULSE   ADCN   RSGP   G3N   EGO   BIOS   CASH   MRNG   MTM   IMPS   ORLY   BSC   DLISK   SCS   CRT   OS76   PONZI   CESC   XOC   TAGR   ALTC   CAB   SDP   BIOB   FRAZ   GBC   CCM100   LEX   CONX   SOJ   ULA   PIZZA   OCEAN   CALC   APW   ATMC   NAS   GNX   SMT   BIX   GTC   BCD   MOT   QLC   SPHTX   TSL   HTML   AMM   CAT   QBT   PRO   HPY   ACE   BCX   INF   CAPP   NGC   SHND   SBTC   ENT   MKR   DIM   B2X   FRGC   LLT   CMS   VIU   DEW   WC   UGT   XTZ   MDS   CLUB   IRL   AI   CMS   BIG   HBC   HTML5   FIL   IGNIS   EAG   GBG   BTCA   XID   ESC   BCDN   PAYP   TOK   IFC   LBTC   UQC   VASH   KBR   BSR   BTE   EXRN   XIN   GRX   UBTC   CPAY   MAGE   PLAY   KARMA   MAGN   SAFEX   ANI   SFE   QBT   FDX   SBC   ZENGOLD   TIE   GBRC   GAIN   STAR   PEC   BEST   MGC   TER   DAV   PCN   PYLNT   SHA   NEOG   PLC   ACES   WAND   SISA   MARX   SUR   MONEY   COUPE   FLAP   SIGMA   TOP   BOS   SJCX   DMC   TURBO   MSD   MINEX   ETT   MTX   CYC   VULC   ACC   THS   GAY   WIC   XSTC   LTG   BTCS   SCT   FONZ   BT1   SKR   WOW   ZBC   FAZZ   UR   DON   DAY   TRIA   HDLB   WINK   BT2   CMP   IQT   SAK   BITOK   FUDD   PLX   PRN   PNX   BTCM   MCI   EUSD   FRN   EDRC   ELITE   EVC   UAHPAY   RYZ   SKC   DUTCH   EVR   XTD   NTC   TELL   HIGH   WSX   YES   ZSE   FFC   LEPEN   RCN   HALLO   BXC   INDIA   EGOLD   COR   BLX   ASN   PRES   NAMO   UNRC   OX   GOLF   FID   APC   CYDER   GLS   GRN   RUNNERS   REGA   BTC2X   BTBc   ANTX   SND   PCS   UNC   TODAY   GMX   ABC   CHEAP   DISK   WA   PRIMU   MCR   X2   ELC   PDG   HYTV   BSN   ACN   POKE   AKY   DEUS   CASH   LAZ   SKULL   RUPX   CC   HNC   MONETA   ROYAL   QORA   MAVRO   BIRDS   FAP   TCOIN   EBIT   KASHH   LDCN   XOT   CME   BLAZR   GARY   IBTC   LKC   NBIT   SPORT   DBG   STEX   YEL   BUB   IPY   TEAM   AXIOM   PRM   ELTC2   BITCF   GML   SNAKE   UTA   9COIN   HYPER   AV   XVE   10MT   FUTC   XQN   LTH   RUBIT   BIT   TLE   SHELL   XDE2   FBL   CBD   FRWC   DASHS   DUB   MMXVI   OMC   FC   PSY   OP   TOPAZ   RICHX   SWP   TCR   HCC   TRICK   BAC   IVZ   XAU   MEN   OPES   XID   VOYA   MBL   BET   BAT   RBBT   BGR   EGG   DCRE   TESLA   TERA   RHFC   GUC   ADK   XRY   EMB   CSC   OCOW   BTU   XYLO   STC   QC   FRCT   MDC   x000D   x000D    Find the input search box x000D  let search   document getElementById  searchCoin   x000D   x000D    Find every item inside the dropdown x000D  let items   document getElementsByClassName  dropdown-item   x000D  function buildDropDown values    x000D      let contents      x000D      for  let name of values    x000D      contents push   lt input type  button  class  dropdown-item  type  button  value      name       gt    x000D        x000D          menuItems   append contents join      x000D   x000D        Hide the row that shows no items were found x000D          empty   hide   x000D    x000D   x000D    Capture the event when user types into the search box x000D  window addEventListener  input   function      x000D      filter search value trim   toLowerCase    x000D     x000D   x000D    For every word entered by the user  check if the symbol starts with that word x000D    If it does show the symbol  else hide it x000D  function filter word    x000D      let length   items length x000D      let collection      x000D      let hidden   0 x000D      for  let i   0  i  lt  length  i      x000D      if  items i  value toLowerCase   startsWith word     x000D            items i   show   x000D        x000D      else   x000D            items i   hide   x000D          hidden   x000D        x000D        x000D   x000D        If all items are hidden  show the empty view x000D      if  hidden     length    x000D          empty   show   x000D        x000D      else   x000D          empty   hide   x000D        x000D    x000D   x000D    If the user clicks on any item  set the title of the button as the text of the item x000D      menuItems   on  click     dropdown-item   function    x000D          dropdown coins   text   this  0  value  x000D          dropdown coins   dropdown  toggle    x000D     x000D   x000D  buildDropDown names  x000D   dropdown   x000D    margin  20px  x000D    x000D   x000D   dropdown-menu   x000D    max-height  20rem  x000D    overflow-y  auto  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 4 0 0-beta 2 css bootstrap css    gt  x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs font-awesome 4 7 0 css font-awesome min css    gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs twitter-bootstrap 4 0 0-beta 2 js bootstrap bundle min js  gt  lt  script gt  x000D      x000D   lt div class  dropdown  gt  x000D       lt button class  btn btn-secondary dropdown-toggle  type  button  id  dropdown coins  data-toggle  dropdown  aria-haspopup  true  x000D          aria-expanded  false  gt  x000D          Coin x000D       lt  button gt  x000D       lt div id  menu  class  dropdown-menu  aria-labelledby  dropdown coins  gt  x000D           lt form class  px-4 py-2  gt  x000D               lt input type  search  class  form-control  id  searchCoin  placeholder  BTC  autofocus  autofocus  gt  x000D           lt  form gt  x000D           lt div id  menuItems  gt  lt  div gt  x000D           lt div id  empty  class  dropdown-header  gt No coins found lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D           x000D   x000D   x000D    UPDATE 1  The code above uses show   and hide   inside a loop which is why the UI is slow when you clear everything you typed in case you didn t notice  Instead of that  use  css  display   none    and  css  display   block

User · Answer

As of 10  July 2017  the issue of Bootstrap 4 support with bootstrap-select is still open  In the open issue  there are some ad-hoc solutions which you could try with your project   Or you could use a library like Select2 and add a theme to match Bootstrap 4  Here is an example  Select 2 with Bootstrap 4  disclaimer  I m not the author of this blog post and I haven t verified if this still works with the all versions of Bootstrap 4

[bootstrap-4] Bootstrap 4 dropdown with search

Examples related to bootstrap-4