What alternative is there for a searchable dropdown <select> box



I’m still new and have tried html datalist but it does not work with electron or I am not doing something correctly. There are website stating that chromium does not support datalist so I take it that the feature will not work for me.

Is there any alternatives to the regular dropdown option way?

the goal is to have a searchable list similar to autocomplete.

If yes please provide details.

Also do I need something other than html to run like angular ajax for jquery to work?


You don’t need a framework. That could make it easier, if you wanted to learn a framework for other things, but it’s not essential.

All you need is an input element. You can use JS to listen for the change event and run a function whenever that fires, delivering the current contents to your code as a variable. This function would use that variable to search your list and create a subset, then iterate through the subset and create a series of elements. You can use CSS to heavily style a ul so that it doesn’t resemble a list at all, and position it immediately under your input so that it appears to be a dropdown. The ul is useful because it can handle positioning its children. These children can be anything you want. Buttons, anchors, other form elements, whatever.


Thanks but how does it differ from the option. I tried the datalist option and it does not work…Could you look at my code. I tried select2 but did not work… forgive the sloppy code.

<!DOCTYPE html>
<link rel="stylesheet" href="./css/styles.css" type="text/css" >

<script type="text/javascript" >
  window.$ = window.jQuery = require('jquery'); 
  // $(document).ready(function() {
  //   $('select').select2();
 //   });   
   var AniList = require('./app.js');
     AniList(function(AniResult) {
       var select = document.getElementById("zipnext");  
       for (var i= 0; i<AniResult.length; i++){
             var el = document.createElement("option");
             var opt = AniResult[i];
             el.textContent = opt;
             el.value = opt;

     <fieldset class="fldst" >

     <div id="div1"><label>Select ZipCode: </label><br><select class="zip">
    <div id="div2"> <label>Select Street:</label> <br><select id="zipnext">


I replicated the DOM manipulation part of your code and it works just fine.


Thanks DamnedScholar

but I wanted something like the single selection to work in my electron project



Well if you’re still having issues in 2017 check out awesomplete!