Chosen Select Box with Search Option

How to Change Normal Select to Chosen Select Box with Search Option – Solution: Chosen and Multiple Chosen with source code, demo, and also how you can execute full program easily. To complete the program you need to follow those steps given bellow

Live Demo

Live Demo Download Code

Also Helpful –

Typewriter Effect

Responsive Header Navigation Menu

Implement Google Pie Chart

How to Change Normal Select to Chosen Select Box with Search Option

Chosen is the jQuery plugin developed by harvesthq. If you are new and go harvesthq GitHub page try to implement the plugin it very hard to understand. That’s why we simplify and modified the code and post those code which is easily understood.

Back to coding, You just need to include two JavaScript files and one CSS file to complete the Chosen Select Box integration. Here use the HTML page to view the Chosen Select Box. That’s why we create an index.html and code it over here.

Download Include File

How to set Chosen in Select Box?

Via Class-

$(‘.chosen’).chosen({no_results_text: “Oops, nothing found!”,});

Via ID-

$(‘#chosen’).chosen({no_results_text: “Oops, nothing found!”,});

index.html

Create an HTML file named ‘index.html‘ and put those codes given below.

<!-- Coding Debugging (https://codingdebugging.com) -->
<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Chosen/Multiple Chosen - Coding Debugging</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <!-- Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/996973c893.js" crossorigin="anonymous"></script>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- Chosen CSS -->
    <link rel="stylesheet" href="include/chosen.css">

    <!-- My Stylesheet -->
    <style type="text/css">
    	body {
		  font-family: "Baloo Thambi 2", cursive;
		}
    </style>

</head>
<body>
    <div class="container-fluid bg-light p-5 text-center my-3">
        <h2 class="">Chosen/Multiple Chosen</h1>

        <h5 class="text-muted">Charge Normal Select Box to Chosen Box with Search Option.</h5>
    </div>

        <div class="container bg-light p-3 my-5">
            <div class="card-body">
                <form action="index.php" method="post" class="form-group">
                    <div class="row">
                        <div class="col-md-12">
                        	<button class="btn btn-dark">Chosen</button>
                        </div>
                        </div>
                        <br>
                    <div class="row mb-3"> 
                       <div class="col-md-5">
                            <select name="chosen" id="chosen" class="form-control">
                            <option value="Iceland">Iceland</option>
                            <option value="Indonesia">Indonesia</option>
                            <option value="India">India</option>
                            <option value="Iran">Iran</option>
                            <option value="Iraq">Iraq</option>
                            <option value="Ireland">Ireland</option>
                            <option value="Isle of Man">Isle of Man</option>
                            <option value="Israel">Israel</option>
                            <option value="Italy">Italy</option>
                            </select>
                            </div>
                       <div class="col-md-2">
                        To <i class="fas fa-arrow-right"></i>
                            </div>
                       <div class="col-md-5">
                            <select name="chosen" id="chosen" class="form-control chosen">
                            <option value="Iceland">Iceland</option>
                            <option value="Indonesia">Indonesia</option>
                            <option value="India">India</option>
                            <option value="Iran">Iran</option>
                            <option value="Iraq">Iraq</option>
                            <option value="Ireland">Ireland</option>
                            <option value="Isle of Man">Isle of Man</option>
                            <option value="Israel">Israel</option>
                            <option value="Italy">Italy</option>
                            </select>
                            </div>
                    </div> 


                    <div class="row">
                    	<div class="col-md-12">
                    		<button class="btn btn-dark">Multiple Chosen</button>
                    	</div>
                    </div>
                    <br>
                    <div class="row mb-3"> 
                        <div class="col-md-5">
                            <select name="chosen" id="chosen" class="form-control" multiple="">
                            <option value="Afganistan">Afghanistan</option>
                            <option value="Albania">Albania</option>
                            <option value="Algeria">Algeria</option>
                            <option value="American Samoa">American Samoa</option>
                            <option value="Andorra">Andorra</option>
                            <option value="Angola">Angola</option>
                            <option value="Anguilla">Anguilla</option>
                            <option value="Antigua & Barbuda">Antigua & Barbuda</option>
                            <option value="Argentina">Argentina</option>
                            <option value="Armenia">Armenia</option>
                            <option value="Aruba">Aruba</option>
                            <option value="Australia">Australia</option>
                            <option value="Austria">Austria</option>
                            <option value="Azerbaijan">Azerbaijan</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                           To <i class="fas fa-arrow-right"></i>
                        </div>
                        <div class="col-md-5">
                            <select name="chosen" id="chosen" class="form-control chosen" multiple="">
                            <option value="Afganistan">Afghanistan</option>
                            <option value="Albania">Albania</option>
                            <option value="Algeria">Algeria</option>
                            <option value="American Samoa">American Samoa</option>
                            <option value="Andorra">Andorra</option>
                            <option value="Angola">Angola</option>
                            <option value="Anguilla">Anguilla</option>
                            <option value="Antigua & Barbuda">Antigua & Barbuda</option>
                            <option value="Argentina">Argentina</option>
                            <option value="Armenia">Armenia</option>
                            <option value="Aruba">Aruba</option>
                            <option value="Australia">Australia</option>
                            <option value="Austria">Austria</option>
                            <option value="Azerbaijan">Azerbaijan</option>
                            </select>
                        </div>
                    </div>                        
             </form> 
          </div>
      </div>


    <!-- JavaScript for Chosen -->
    <script src="include/chosen.jquery.js" type="text/javascript"></script>
    <script src="include/prism.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
    //For Class
    $('.chosen').chosen({no_results_text: "Oops, nothing found!",});  
    //For ID
    /*$('#chosen').chosen({no_results_text: "Oops, nothing found!",});*/ 
    </script>

</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

<!DOCTYPE html>

<head>

<title>Chosen/Multiple Chosen - Coding Debugging</title>

body {

font-family: "Baloo Thambi 2", cursive;

}

</style>

</head>

<body>

<h2 class="">Chosen/Multiple Chosen</h1>

<h5 class="text-muted">Charge Normal Select Box to Chosen Box with Search Option.</h5>

</div>

<button class="btn btn-dark">Chosen</button>

</div>

<br>

<option value="Iceland">Iceland</option>

<option value="Indonesia">Indonesia</option>

<option value="India">India</option>

<option value="Ireland">Ireland</option>

<option value="Israel">Israel</option>

<option value="Italy">Italy</option>

</select>

</div>

To <i class="fas fa-arrow-right"></i>

</div>

<option value="Iceland">Iceland</option>

<option value="Indonesia">Indonesia</option>

<option value="India">India</option>

<option value="Ireland">Ireland</option>

<option value="Israel">Israel</option>

<option value="Italy">Italy</option>

</select>

</div>

<button class="btn btn-dark">Multiple Chosen</button>

</div>

<br>

<option value="Afganistan">Afghanistan</option>

<option value="Albania">Albania</option>

<option value="Algeria">Algeria</option>

<option value="American Samoa">American Samoa</option>

<option value="Andorra">Andorra</option>

<option value="Angola">Angola</option>

<option value="Anguilla">Anguilla</option>

<option value="Antigua & Barbuda">Antigua & Barbuda</option>

<option value="Argentina">Argentina</option>

<option value="Armenia">Armenia</option>

<option value="Aruba">Aruba</option>

<option value="Australia">Australia</option>

<option value="Austria">Austria</option>

<option value="Azerbaijan">Azerbaijan</option>

</select>

</div>

To <i class="fas fa-arrow-right"></i>

</div>

<option value="Afganistan">Afghanistan</option>

<option value="Albania">Albania</option>

<option value="Algeria">Algeria</option>

<option value="American Samoa">American Samoa</option>

<option value="Andorra">Andorra</option>

<option value="Angola">Angola</option>

<option value="Anguilla">Anguilla</option>

<option value="Antigua & Barbuda">Antigua & Barbuda</option>

<option value="Argentina">Argentina</option>

<option value="Armenia">Armenia</option>

<option value="Aruba">Aruba</option>

<option value="Australia">Australia</option>

<option value="Austria">Austria</option>

<option value="Azerbaijan">Azerbaijan</option>

</select>

</div>

</form>

</div>

//For Class

$('.chosen').chosen({no_results_text: "Oops, nothing found!",});

//For ID

/*$('#chosen').chosen({no_results_text: "Oops, nothing found!",});*/

</script>

</body>

</html>

Thank you for visiting!

We appreciate you for your precious time. I hope you are learn something from here! If you have any queries about this coding comment down below we will reply ASAP.

Keep coding, Keep debugging!

Live Demo Download Code

Chosen Select Box with Search Option | Multiple Chosen

Live Demo

How to Change Normal Select to Chosen Select Box with Search Option

How to set Chosen in Select Box?

Like this:

Related

Leave a Comment Cancel Reply

Live Demo

How to Change Normal Select to Chosen Select Box with Search Option

How to set Chosen in Select Box?

Share this:

Like this:

Related

Leave a Comment Cancel Reply