Single Filter Select and Combo Box - Dojo

Single Filter Select and Combo box looks same however difference is with the value that is returned by these two components. Filter Select will return id and combo box will return the value displayed. Combo Box will let user enter any value which may or may not be in the list butsame will be submitted when form is submitted.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Single Filter Select And Combo Box</title>
<link rel="stylesheet" href="../js/1_8_3/dijit/themes/claro/claro.css">
<style type="text/css">
@import "../js/1_8_3/dojo/resources/dojo.css";
@import "../js/1_8_3/dijit/themes/claro/claro.css";
@import "../js/1_8_3/dijit/themes/claro/document.css";
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
    <script src='../js/1_8_3/dojo/dojo.js'></script>
    <script src='../js/combo.js'></script>
</head>
<body class="claro">
<div style="width:450px;height:200px;margin-left:200px;">
<br><br>
<b>Single Filtering Select:</b><br><br>
City : <input id="city" /> <br><br>
<b>Combo Box:</b><br><br>
City : <input id="comboCity"/>


</div>

</body>
</html>

JS : combo.js

 var cities = [ {name:"Bangalore", id:"1"},
               {name:"Delhi", id:"2"},
               {name:"Vadodara", id:"3"},
               {name:"Chennai", id:"4"},
               {name:"Hyderabad", id:"5"}];
require([
    "dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/domReady!"
], function(Memory, FilteringSelect){
    var cityStore = new Memory({
        data: cities
    });

    var filteringSelect = new FilteringSelect({
        id: "city",
        name: "city",
        value: "1",
        store: cityStore,
        searchAttr: "name"
    }, "city");
});

require([
         "dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"
     ], function(Memory, ComboBox){
         var comboStore = new Memory({
             data: cities
         });

         var comboBox = new ComboBox({
             id: "comboCity",
             name: "comboCity",
             value: "Bangalore",
             store: comboStore,
             searchAttr: "name"
         }, "comboCity");
     });


-------------code ends-----
To get the value we can use following:

dijit.byId('city').get('value') //for single filter select

dijit.byId('comboCity').get('value') //for combo box

For more details please see dojo APIs.

Image: