zoukankan      html  css  js  c++  java
  • typeahead使用ajax补全输入框的方法

    最近想使用一个输入框补全的功能,bootstrap有,但是官方手册太简单,搞了好几天,终于弄好了。

    官方使用的方法是/<input type="text" data-provide="typeahead" />,我开始用静态source数据都弄不出来,后来搜了一下,有国外用户说加一个class="typeahead",因为bootstrap要求数据都来自一个地方,要么都放在html标签里面,例如/<input type="text" data-provide="typeahead" source="[...]" />,要么就都放在js方法里面。还有typeahead不接收json数据,要转换成数组,typeahead的source方法可以设置为函数,传递两个参数,一个query是input输入框内的数据,一个process回调函数。
     
    最后就是下面这样
    html:
    /<input id="ProtocolCompany'" type="text" class="typeahead" />
     
    js:
    $('#ProtocolCompany').typeahead({
            source: function (query, process) {
                $.ajax({
                    url: 'InputPriceAction.ashx?Action=GetPlace',
                    type: 'GET',
                    dataType: 'JSON',
                    async: true,
                    data: 'PlaceName=' + query,
                    success: function (data) {
                        var arr = [];
                        for (i in data) {
                            arr.push(data[i]['H_ChineseName'] + data[i]['H_EnglishName']);
                        }
                        process(arr);
                    }
                });
            }
        })
  • 相关阅读:
    6_java_maven
    线性代数 linear algebra
    hadoop_wordcount_1027
    hadoop_worddistinct_1030
    hadoop_wordcount_1023
    搭建伪分布式_笔记
    linux-sunrpc
    linux-volatile
    linux---asmlinkage
    dqs_linux-1
  • 原文地址:https://www.cnblogs.com/q149072205/p/3224361.html
Copyright © 2011-2022 走看看