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);
                    }
                });
            }
        })
  • 相关阅读:
    jQuery 源码基本框架
    jQuery 源码细读 -- $.Callbacks
    Excel等外部程序点击链接会带上IE信息的bug
    &nbsp; 与 空格的区别
    前端模板文件化jQuery插件 $.loadTemplates
    客户端渲染的页面能否被搜索引擎完整收录呢?
    javascript 函数声明问题
    JavaScript 继承机制小记
    link与@import
    tcp_udp
  • 原文地址:https://www.cnblogs.com/q149072205/p/3224361.html
Copyright © 2011-2022 走看看