• boostrap插件---typeahead.js---输入提示下拉菜单


    首先需要加载,jquery,bootstrap.js,typeahead.js

    <input id="typea" type="text" data-provide="typeahead" autocomplete="off">

    autocomplete="off"以阻止浏览器的默认提示菜单遮盖Bootstrap的输入提示下拉菜单。

    $('#typea').typeahead(options)    初始化提示功能

    source    array,function    用于查询的数据源,函数接受两个参数,输入的query,process回调函数

    items    number    8    下拉菜单中显示的最大条目数

    minLength    number    触发所需的最小字符个数

    mather    function    case insensitive    某个查询是否符合某个条目,

    sorter    function    排序提示项

    updater    function    返回选中得条目

    highlighter    function      高亮自动完成的结果

    <input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" />
     
    var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'];
    $('#search').typeahead({source: subjects})

    $('#search').typeahead({
          ajax: {
            url: "v2/enterprise/searchListPaging.do",
            timeout: 0,         //指定等待键盘输入停止的时间量,直到将查询发送到服务器为止。默认值为300毫秒。
            triggerLength: 1,   //这是要采取行动的文本的最小长度。默认值为1。
            crossDomain: true,
            method: "post",
            jsonp: 'callback',
            preDispatch: function (query) {
              return {
                keyword: query,
                skip: 0
              }
            },
            preProcess: function (res) {
              if(res.status != '200'){
                return false;
              }
              return res.data.items;
            }
          },
          scrollBar: true,
          items: 100
        })
    $('#search').typeahead({
          
          source: function(query,process){
            var parameter = {
              keyword: query,
              skip: 0
            };
            $.post('/enterprise/searchListPaging.do', parameter, function (data) {
              console.log(data)
              var arr = [];
              data.data.items.forEach(item => {
                arr.push(item.name)
              })
                process(arr);
            });
            // $.ajax({
            //     url: 'v2/enterprise/searchListPaging.do',
            //     type: 'post',
            //     crossDomain: true,
            //     // dataType: "jsonp",
            //     jsonp: 'callback',
            //     data: {
            //         keyword: query,
            //         skip: 0
            //     },
            //     success: function (res) {
            //       process([1,2,3])
            //       console.log('aaa',res.data.items);
            //       //   var data = res.data.items;
            //       //   if (data != undefined) {
            //       //       var li_str = '';
            //       //       $(data).each(function (index, item) {
            //       //           li_str += '<li>' + item.name + '</li>';
            //       //       });
            //       //       $('.company-list').show().find('ul').html(li_str);
            //       //   }
            //     },
            //     error(res) {
            //         console.log('error',res);
            //     }
            // })
          },
          scrollBar: true,
          scrollHeight: '200'
        })

    typeahead下载地址:https://v2.bootcss.com/assets/js/bootstrap-typeahead.js

    参考地址:https://github.com/biggora/bootstrap-ajax-typeahead

  • 相关阅读:
    Codeforces Round #567 (Div. 2) B. Split a Number
    es界面的分组,求平均值的操作
    es界面的查询命令
    es界面的crud
    WebStorm中自定义文档注释模板
    Vue 正确理解mounted、beforeUpdate、updated三个钩子函数的关系
    oracle分析函数
    vue中时间格式的处理
    vue-router params和query的区别
    vue中的深拷贝理解和实现
  • 原文地址:https://www.cnblogs.com/tianxinyu/p/9982942.html
Copyright © 2020-2023  润新知