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

#1

Hello

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?

#2

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.

#3

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>
<html> 
<HEAD>  
<link rel="stylesheet" href="./css/styles.css" type="text/css" >

</HEAD> 
<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;
             select.appendChild(el);
             
       }
       
   });
         

  
  </script>
<body>
  
   <form>
     <fieldset class="fldst" >

 
     
     <div id="div1"><label>Select ZipCode: </label><br><select class="zip">
                   <option>Choose</option>
                   <option>66678</option>
                   <option>56708</option>
                   <option>45060</option>
                   <option>90065</option>
                   <option>35068</option>
                   <option>67069</option>
                   <option>44070</option>
                   </select></div>
  
               
    <div id="div2"> <label>Select Street:</label> <br><select id="zipnext">
                  <option>Choose</option>
                  </select></div>
      
   
   
   
 
 
   
       </fieldset>
     </form> 
  </body>
</html>
#4

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

#5

Thanks DamnedScholar

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

https://select2.github.io/examples.html

#6

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