jQueryUI之Autocomplete

時間 2019-12-17

原文原文鏈接

Autocomplete使用場景javascript

場景1、官網相似百度谷歌搜索，像Bootstrap-3-Typeahead插件等,若用戶對下拉信息陌生的狀況下，我的感受對於ERP系統場景一不是很好用。css

場景2、點擊文本框就能實現查詢全部數據，若沒有數據，tip提示html

如下以場景二做爲案例：java

實現代碼以下jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BootStrap-tooltip+jqueryUI+Autocomplate</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>    
    <div style="margin: 50px 50px">
        <label for="product_search">Product Search: </label>
        <input id="product_search" type="text" data-toggle="tooltip" data-placement="right" >
    </div>
    <script type="text/javascript">
        $(function(){
            var personList = [{
                id : "1",
                name: "Aragorn",},
            {
                id : "2",
                name: "GatesBill",
            },{
                id : "3",
                name: "HlloKitty",
            }];
            var $chooseSearch = $("#product_search");
            $chooseSearch.autocomplete({
                minLength: 0,
                change: function(event, ui) {
                    if (ui.item == null) {
                        var $this = $(this);
                            $this.val("");
                    }
                },
                select: function(event, ui) {
                    var $this = $(this);
                        $this.val(ui.item.name).trigger('change');
                }
            }).off("click").click(function() {
                var $that = $(this);
                 if (personList && personList.length > 0) {
                        for (var i = 0; i < personList.length; i++) {
                            personList[i].value = personList[i].name;
                        }
                        $that.autocomplete('option', 'source', personList);
                        $that.autocomplete('search', '');
                    } else {
                        //tips提示
                        setTimeout(function(){
                            $that.attr("data-original-title","沒有記錄！");
                            $that.tooltip("show");
                        },150);  
                    }
            });
        })
    </script>
</body>
</html>

1. JQueryUI之Autocomplete
2. JqueryUI學習筆記-自動完成autocomplete
3. jqueryUI
4. jQueryUI互動效果之resizable
5. autocomplete
6. Autocomplete
7. jqueryUI插件
8. JQueryUI-拖動（Draggable）
9. bootstrap 和 jqueryui
10. jquery ui 插件之autocomplete
更多相關文章...
• ASP.NET TextBox AutoCompleteType 屬性 - ASP.NET 教程
• ASP.NET TextBox 控件 - ASP.NET 教程
• 互聯網組織的未來：剖析GitHub員工的任性之源
• ☆基於Java Instrument的Agent實現

相關標籤/搜索

mvc+jquery+autocomplete

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。