jQuery Searchable DropDown Plugin doesn't work
Question
I can't get it to do anything. The drop down just behaves normally. I've followed their instructions and created the simplest demo I could and still nothing works. I've checked my paths and put everything in the same directory to make sure everything is being found. I have jQuery being loaded first.
Here's the html file:
<!doctype html>
<html>
<head>
<title>Searchable</title>
<script src="jquery-1.9.1.js"></script>
<script src="jquery.searchabledropdown-1.0.8.src.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select").searchable();
});
</script>
</head>
<body>
<select id="myselect">
<option value="0">Aardvark</option>
<option value="1">Beta</option>
<option value="2">Charlie</option>
<option value="3">Louis Chan</option>
<option value="4">Zoomba</option>
<option value="5">Lima</option>
</select>
</body>
</html>
Here's a link to the plugin. Demo is on the plugin page: http://jsearchdropdown.sourceforge.net/
5 answers
solution1
3 2013-05-24 18:35:20
this works for me:
<!doctype html>
<html>
<head>
<title>Searchable</title>
<script type="text/javascript" src="http://jsearchdropdown.sourceforge.net/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://jsearchdropdown.sourceforge.net//jquery.searchabledropdown.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select").searchable();
});
</script>
</head>
<body>
<select id="myselect">
<option value="0">Aardvark</option>
<option value="1">Beta</option>
<option value="2">Charlie</option>
<option value="3">Louis Chan</option>
<option value="4">Zoomba</option>
<option value="5">Lima</option>
</select>
</body>
</html>
It seems like the $.browser has been removed from jquery 1.9 core and above see the reference here you can decide to fix the problem by changing the library, use an older jquery version or use another alternative here you can find some better examples.
Good luck!
solution2
2 ACCPTED 2013-05-24 18:43:08
I downloaded the code and tested it. The problem is jQuery 1.9.1, when I put that version it does not work, but when I put back jQuery 1.8.3 it works. I don't think there is a way to solve it unless you dig in the library, so it's better to use 1.8.3 as in the demo.
solution3
1 2015-12-28 14:46:04
For the above Example: Once you searched the key like 'Zoo..' then you can select 'Zoomba' . Again If want to change the selection , in that list you can able to see only 'Zoomba' not all values.
If you want to show all values in that list you have to clear that searched key once selected index changed . Like this,
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Searchable</title> <script type="text/javascript" src="http://jsearchdropdown.sourceforge.net/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://jsearchdropdown.sourceforge.net//jquery.searchabledropdown.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#myselect').searchable(); $('#myselect').change(function() { $(this).autocomplete('search', ''); }); }); </script> </head> <body> <select id="myselect"> <option value="0">Aardvark</option> <option value="1">Beta</option> <option value="2">Charlie</option> <option value="3">Louis Chan</option> <option value="4">Zoomba</option> <option value="5">Lima</option> </select> </body> </html>
solution4
0 2013-07-24 09:45:59
You written code is fine, It is a browser and Jquery version related issue.
- Runs on IE 7.x, IE 8.x, Firefox 3.5.x, Safari 4.x, Opera 10.x, Chrome 3.x
It uses version Jquery 1.7.2 and Jquery UI 1.8.18
Also use plugin http://effinroot.eiremedia.netdna-cdn.com/repo/plugins/forms-controls/searchabledropdown/jquery.searchabledropdown.js
You can check the running version on JSFiddle http://jsfiddle.net/JWyRZ/
solution5
0 2015-12-14 22:37:11
You always can use jquery-browser-plugin plugin from https://github.com/gabceb/jquery-browser-plugin . It adds the functionality missed by upgrade to 1.9. Just make sure you load jquery first and jquery-browser plugin afterwards.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.