jQuery Searchable DropDown插件不起作用

时间:2013-05-24 18:10:18

标签: javascript jquery jquery-plugins

我无法做任何事情。下拉只是表现正常。我按照他们的指示创建了我能做的最简单的演示,但仍然无效。我检查了我的路径并将所有内容放在同一目录中以确保找到所有内容。我首先加载了jQuery。

这是html文件:

<!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>

这是插件的链接。演示位于插件页面上:http://jsearchdropdown.sourceforge.net/

5 个答案:

答案 0 :(得分:3)

这对我有用:

<!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>

似乎$ .browser已从jquery 1.9核心及以上版本中移除,请参阅参考here,您可以决定通过更改库来修复问题,使用较旧的jquery版本或使用其他替代here 3}}你可以找到一些更好的例子。

祝你好运!

答案 1 :(得分:2)

我下载了代码并对其进行了测试。问题是jQuery 1.9.1,当我把那个版本它不起作用,但当我放回jQuery 1.8.3时,它的工作原理。 我不认为有办法解决它,除非你深入研究库,所以最好在演示中使用1.8.3。

答案 2 :(得分:1)

对于上面的示例:一旦您搜索了'Zoo ..'之类的密钥,您就可以选择'Zoomba'。再次如果想更改选择,在该列表中您可以只能看到'Zoomba'而不是所有值。

如果要显示该列表中的所有值,则必须在选择的索引已更改后清除该搜索的键。像这样,

<!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>

答案 3 :(得分:0)

您编写的代码很好,这是一个与浏览器和Jquery版本相关的问题。

  1. 在IE 7.x,IE 8.x,Firefox 3.5.x,Safari 4.x,Opera 10.x,Chrome 3.x上运行
  2. 它使用版本Jquery 1.7.2和Jquery UI 1.8.18

    还可以使用插件http://effinroot.eiremedia.netdna-cdn.com/repo/plugins/forms-controls/searchabledropdown/jquery.searchabledropdown.js

    您可以在JSFiddle上查看正在运行的版本 http://jsfiddle.net/JWyRZ/

答案 4 :(得分:0)

您始终可以使用https://github.com/gabceb/jquery-browser-plugin中的jquery-browser-plugin插件。它将升级错过的功能添加到1.9。只需确保先加载jquery,然后再加载jquery-browser插件。