没有jQuery UI的自动完成

再见

我在项目中使用jQuery,并且需要实现自动完成功能,但是我想避免包括jQuery UI小部件,并希望使用某些特定的外部插件。您能否提供一些示例/链接?我必须查询一个返回键值对的远程JSON源。

罗汉·库玛(Rohan Kumar)

您可以使用jQuery插件Ajax自动完成功能

这是完整的文档

脚本

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.24/jquery.autocomplete.min.js"></script>
<script>
   a1 = $('#query').autocomplete({
         width: 448,
         delimiter: /(,|;)\s*/,
         lookup: 'Andorra,Azerbaijan,Bahamas,Bahrain,Benin,Bhutan,Bolivia,Bosnia Herzegovina,Botswana,Brazil,Brunei,Bulgaria,Burkina, Burundi,Cambodia,Cameroon,Canada,Cape Verde,Central African Rep,Chile,China,Colombia,Comoros,Congo,Congo {Democratic Rep},Costa Rica,Croatia,Cuba,Cyprus,Czech Republic,Denmark,Djibouti,East Timor,Ecuador,Egypt,El Salvador,Equatorial Guinea,Eritrea,Fiji,France,Georgia,Germany,Ghana,Greece,Grenada,Guatemala,Guinea,Guinea-Bissau,Guyana,Haiti,Honduras,Hungary,India,Iraq,Ireland {Republic},Ivory Coast,Jamaica,Japan,Kazakhstan,Kiribati,Korea North,'.split(',')
      }); 
    </script>

的CSS

.text-field {
    -moz-box-sizing: border-box;
    border: 1px solid #EEEEEE;
    font-family: "Source Sans Pro",Arial,sans-serif;
    font-size: 0.73684em;
    font-weight: 600;
    height: 37px;
    margin: 0;
    padding: 5px;
    width: 100%;
}
.autocomplete-suggestion {
    overflow: hidden;
    padding: 2px 5px;
    white-space: nowrap;
}
.autocomplete-suggestions strong {
    color: #3399FF;
    font-weight: normal;
}
.autocomplete-selected{
  background:#F0F0F0;
}

的HTML

 <input type="text" id="query" class="text-field valid" autocomplete="off" placeholder="Search here">

我创建的演示autocomplete是链接jsbin.com

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery UI自动完成-没有结果消息

来自分类Dev

jQuery的UI自动完成似乎没有触发?

来自分类Dev

jQuery UI,HTML自动完成

来自分类Dev

JQuery UI 自动完成很慢

来自分类Dev

带有URL的jQuery UI自动完成

来自分类Dev

jQuery提到jQuery UI自动完成

来自分类Dev

没有URL的jQuery自动完成源

来自分类Dev

多个JQuery UI自动完成选择

来自分类Dev

jQuery UI自动完成问题

来自分类Dev

jQuery UI自动完成奇怪的行为

来自分类Dev

jQuery UI自动完成和隐藏字段

来自分类Dev

jQuery UI自动完成minLength提示

来自分类Dev

jQuery UI自动完成显示错误的值

来自分类Dev

jQuery UI自动完成解析数据

来自分类Dev

jQuery UI自动完成未填充

来自分类Dev

jQuery UI自动完成的JSON数组

来自分类Dev

Jquery UI自动完成的限制结果

来自分类Dev

jQuery UI自动完成与Django中的图片

来自分类Dev

无法应用jQuery UI自动完成的CSS

来自分类Dev

jQuery UI通过Ajax错误自动完成:

来自分类Dev

jQuery UI自动完成和验证

来自分类Dev

在jQuery UI自动完成中使用if语句

来自分类Dev

jQuery UI自动完成显示错误的值

来自分类Dev

jQuery UI自动完成打开位置

来自分类Dev

自动完成的jQuery UI ... json的错误

来自分类Dev

jQuery UI自动完成的JSON数组

来自分类Dev

Jquery UI自动完成的限制结果

来自分类Dev

jQuery UI自动完成多个“响应”方法

来自分类Dev

Rails中的jQuery UI自动完成链接