关闭

typeahead.js_jquery input 搜索自动补全jQuery插件

时间: 2018-05-21阅读: 1277标签: 插件
jquery.typeahead.js是一款高级的自动补全jQuery插件。该自动补全插件提供超过50个配置选项和回调方法,用于完成自动补全功能,能够完成绝大部分表单自动补全的需求。 使用方法 在页面中引入jquery、jquery.typeahead.min.js和jquery.typeahead.min.css文件。
<link rel="stylesheet" type="text/css" href="css/jquery.typeahead.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.typeahead.min.js"></script>


html结构 该jquery自动补全插件可以和bootstrap集成使用,基本的html结构如下:
<form>
    <div class="typeahead__container">
        <div class="typeahead__field">
   
            <span class="typeahead__query">
                <input class="js-typeahead"
                       name="q"
                       type="search"
                       autocomplete="off">
            </span>
            <span class="typeahead__button">
                <button type="submit">
                    <span class="typeahead__search-icon"></span>
                </button>
            </span>
   
        </div>
    </div>
</form>


初始化插件 初始化该jquery自动补全插件有两种方法: 方法一:通过$.typeahead()来初始化。(建议使用该方法)
$.typeahead({
    input: ".js-typeahead",
    order: "asc",
    source: {
        groupName: {
            // Ajax Request
            ajax: {
                url: "..."
            }
        }
    },
    callback: {
        onClickBefore: function () { ... }
    }
});


方法二:通过唯一的input选择器来创建一个jQuery对象,然后在该对象上使用.typeahead()方法。
$('.js-typeahead').typeahead({
    order: "asc",
    source: {
        groupName: {
            // Array of Objects / Strings
            data: [ {...}, {...} ]
        }
    },
    callback: {
        onInit: function () { ... }
    }
});


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/789

关闭

Vue实现一个图片懒加载插件

图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要。今天就用vue来实现一个图片懒加载的插件。 这篇博客采用“三步走”战略——Vue.use()、Vue.direction、Vue图片懒加载插件实现,逐步实现一个Vue的图片懒加载插件。

前端最常用的vscode插件集

在前端开发中,使用Visual Studio Code有哪些你常用的插件?推荐几个自己喜欢的,不带链接,自己搜索安装吧。这些都是比较实用、前端必备的插件集

基于Vue的验证码插件vue2-verify

在我们Web项目开发中,验证码是一种比较常见的区分用户是计算机还是人的手段。主要是为了保证项目的安全。现在Vue开发的项目很多,基本都是前后端分离的。给大家推荐一个基于Vue比较好用的验证码插件vue2-verify。但是大家要注意一点

Bootstrap Table插件自定义排序使用方法

Bootstrap Table 插件含有样式的数据如何排序,如下面的字段stargazers_count;第一种方式:增加加样式之前的额外字段,如增加stargazers_count1 字段,并设置data-sort-name=stargazers_count1

Vue自定义指令directive,插件的封装以及混合mixins

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。

10款好用到爆的Vim插件

我使用Vim编辑器已经差不多20年了,不过,我是在前两年才开始使用Vim插件,我会定时清理插件,我认为这样做更有助于自己了解哪些插件才是最好的。此外,针对不同的语言和文件配置我会使用不同的插件

原生 js 实现一个有动画效果的进度条插件 progress

一个用于装载进度条内容的 div (且叫做 container)。然后在 container 里面动态生成三个元素,一个是做为背景的 div (且叫做 progress),一个是做为显示进度的 div (且叫做 bar),还有一个是显示文字的 span (且叫做 text)。

fullPage.js全屏滚动插件

本文介绍使用fullPage.js插件可轻易创建全屏滚动网站。很多网站只有一个首页,它是由多个可以滚动的全屏内容组成,使用鼠标滚动或方向键可控制滚屏,支持CSS3动画和手机触屏,效果非常高大上。

Webpack插件开发简要

如今‘大前端’这个概念在前端界大热,说‘大前端’,我们就要提到‘前后端分离’,‘前后端分离’又离不开‘本地开发构建’,‘本地开发构建’自然离不开webpack,webpack想要工作,那它就需要各种插件的支持,O(∩_∩)O哈哈~,逗了一大圈,终于引出了主题

chrome书签插件

Pinbox 是一款可以使得用户的Chrome书签变得更加生动的谷歌浏览器插件,用户在Chrome中安装了Pinbox插件以后,只需要点击一下扩展按钮就会自动为你把当前的网页保存到Pinbox中。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!