阅读

autocomplete 输入提示

javascript  2016-02-29 12:11

1. 引入文件

<script type="text/javascript" src="/static/plugins/jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/static/plugins/jquery-ui/jquery-ui.min.css">
<style type="text/css">
    /*显示滚动条,默认高度300px*/
    .ui-autocomplete{max-height: 300px; overflow-y: auto; overflow-x: hidden;}
</style>

2. 输入文本框

<input id="input_key" name="input_key" type="text" value="">

3. javascript

<script>
    var _data = ['abc', 'bcd'];    //提示数据;Object or Array
    $('#input_key').autocomplete({
        source: _data,
        minLength: 0,  //无输入也提示,1-输入1个字时提示......
        scroll: true,
        scrollHeight: 10,
        create: function(e, ui){
            $(this).bind('click', function(){  //文件框获取焦点即时提示,
                $(this).autocomplete('search', '');
            });
        },
    });
</script>


广告

【腾讯云】618云上GO!云服务器限时秒杀,1核2G首年95元!
【腾讯云】推广者专属福利,新客户无门槛领取总价值高达2860元代金券,每种代金券限量500张,先到先得。

广告

618优惠礼包限时领取,更有2000元飞天会员礼包等你来拿
上云优惠聚集地,云小站专属代金券可叠加产品折扣使用