Java Hit: Editable and searchable Drop down with Javascript

Friday, July 21, 2017

Editable and searchable Drop down with Javascript

Below is the select drop down, here you able to Edit, Search and Select the value. But forgot to implement arrow icon for the drop down.

However I will do another post which will show you how to hide and show drop down arrow image with the help of css.

Comment below if you need any query.

<html>
<head>
<title>Own Drop Down Component</title>

</head>
<body>
<form name="myfrm">
<input id="filter">
<select id="countries" multiple onchange="onChangeValue()" style="width:11%">
  <option value="india">India</option>
  <option value="america">America</option>
  <option value="germany">Germany</option>
  <option value="russia">Russia</option>
</select>
</form>
<script type="text/javascript">
(function () {
    // the IIFE  for local variable store information
    var optionsCache = [];

    // add option values to the cache with reduce
    function optionsArray(select) {
        var reduce = Array.prototype.reduce;
  //addToCache for cache
        return reduce.call(select.options, function addToCache(options, option) {
            options.push(option);
            return options;
        }, []);
    }
    // give a list of options matching the filter value with match function
    function filterOptions(filterValue, optionsCache) {
        return optionsCache.reduce(function filterCache(options, option) {
            var optionText = option.textContent;
            if (option.text.toLowerCase().match(filterValue.toLowerCase())) {
                options.push(option);
            }
            return options;
        }, []);
    }
    // replace current with new options
    function replaceOptions(select, options) {
 //document.getElementById("countries").size = select.options.length;
        while (select.options.length > 0) {
            select.remove(0);
        }
        options.forEach(function addOption(option) {
            select.add(option);
        });
    }
    
    function filterOptionsHandler(evt) {
        var filterField = evt.target;
        var targetSelect = document.getElementById("countries");
        if (optionsCache.length < 1) {
            optionsCache = optionsArray(targetSelect);
        }
        var options = filterOptions(filterField.value, optionsCache);
        replaceOptions(targetSelect, options);
  var x = document.getElementById("countries").length;
  //alert("bbb"+x)
  if (x > 0) {
  document.getElementById("countries").size = x;
  } else {
   document.getElementById("countries").size = 1;
   var select = document.getElementById("countries");
   select.options[select.options.length] = new Option('No Results','empty');}

    }
    // attach whatever event
    var filter = document.getElementById("filter");
 
    filter.addEventListener( 'click', function(){
  document.getElementById("countries").style.display = "block";
 } );
 filter.addEventListener("keyup", filterOptionsHandler, false);
 document.getElementById("countries").style.display = "none";
}());

function onChangeValue () {
var e = document.getElementById("countries");
var strUser = e.options[e.selectedIndex].text;
//alert(strUser);
  
  if (strUser != null) {
    //alert("Test" + strUser);
 document.getElementById('filter').value = strUser;
 document.getElementById("countries").style.display = "none";
  }
 }
  
</script>
</body>
</html>

Java Hit

Friday, July 21, 2017

Editable and searchable Drop down with Javascript

No comments:

Post a Comment