0

I found following code here on Stack Overflow.

$(".chosen-select").chosen({
  no_results_text: "Oops, nothing found!"
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>

<form action="http://httpbin.org/post" method="post">
  <select data-placeholder="Begin typing a name to filter..." multiple class="chosen-select" name="test">
    <option value=""></option>
    <option>American Black Bear</option>
    <option>Asiatic Black Bear</option>
    <option>Brown Bear</option>
    <option>Giant Panda</option>
    <option>Sloth Bear</option>
    <option>Sun Bear</option>
    <option>Polar Bear</option>
    <option>Spectacled Bear</option>
  </select>
  <input type="submit">
</form>

In this question: HTML: Select multiple as dropdown

But my implementation does not work.

I copied code above (without the first part $) and pasted it (without modification) in my .php page. Then i tried to run the code but my output looks like this.

My output

I do not include any other libraries or other codes apart from the three within the code snippet. What should i do in order for it to work?

JoseTheChamp
  • 3
  • 3
  • Check the browser console for errors. – freedomn-m Dec 18 '22 at 11:59
  • 1
    Please clarify: you included the script/link/html code, but *not* the `$().chosen` line? That line initiates chosen and is required in either a separate .js file included in the page or in its own ` – freedomn-m Dec 18 '22 at 12:01
  • I have added the $().chosen to its own .js file and then via – JoseTheChamp Dec 18 '22 at 13:53
  • There are two errors in the console: Uncaught ReferenceError: $ is not defined at sc.js:1:1 and Failed to load resource: the server responded with a status of 404 (Not Found) – JoseTheChamp Dec 18 '22 at 13:56
  • Make sure your sc.js is loaded *after* the jquery line. Which line is giving the 404? – freedomn-m Dec 18 '22 at 14:28

3 Answers3

2

You just have to add attribute of multiple for select list so that it works as a multiple select list.

Below is the sample code for this:

<select multiple id="select">
    <option>Opt. 1</option>
    <option>Opt. 2</option>
    <option>Opt. 3</option>
</select>
Developer Ali Usman
  • 857
  • 4
  • 16
0

So to resolve the issue I had to add the

$(".chosen-select").chosen({
  no_results_text: "Oops, nothing found!"
})

into script tag and now it started to work. (i ignored it before, thinking it did not have effect in a sence working/not working).

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
JoseTheChamp
  • 3
  • 3
0

it seems you run the this function $(".chosen-select").chosen({ no_results_text: "Oops, nothing found!" }) before loading the library files.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>

<form action="http://httpbin.org/post" method="post">
  <select data-placeholder="Begin typing a name to filter..." multiple class="chosen-select" name="test">
    <option value=""></option>
    <option>American Black Bear</option>
    <option>Asiatic Black Bear</option>
    <option>Brown Bear</option>
    <option>Giant Panda</option>
    <option>Sloth Bear</option>
    <option>Sun Bear</option>
    <option>Polar Bear</option>
    <option>Spectacled Bear</option>
  </select>
  <input type="submit">
</form>
<script>
 $(document).ready(function() {   
  $(".chosen-select").chosen({
     no_results_text: "Oops, nothing found!"
   })
 });
</script>
David F
  • 605
  • 4
  • 10