boostrap插件---typeahead.js---輸入提示下拉菜單

時間 2019-12-12

標籤 boostrap 插件 typeahead.js typeahead 輸入提示下拉菜單欄目 C&C++ 简体版

原文原文鏈接

首先須要加載，jquery，bootstrap.js，typeahead.jscss

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

autocomplete="off"以阻止瀏覽器的默認提示菜單遮蓋Bootstrap的輸入提示下拉菜單。jquery

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

source　　　　array,function　　　　用於查詢的數據源，函數接受兩個參數，輸入的query，process回調函數git

items　　　　number　　　　8　　　　下拉菜單中顯示的最大條目數github

minLength　　　　number　　　　觸發所需的最小字符個數ajax

mather　　　　function　　　　case insensitive　　　　某個查詢是否符合某個條目，json

sorter　　　　function　　　　排序提示項bootstrap

updater　　　　function　　　　返回選中得條目瀏覽器

highlighter　　　　function 　　　　高亮自動完成的結果服務器

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'
    })