如何使用 Bootstrap Typeahead 创建动态自动完成搜索？

在本文中，我们将学习使用 Bootstrap Typeahead 实现动态自动完成搜索。 Bootstrap Typeahead是一个插件，有助于在搜索栏中添加漂亮的自动完成选项。

在这种方法中，我们将使用静态数据进行自动完成，但我们也可以使用动态 JSON 数据来显示搜索选项。 Typeahead 插件中使用的方法如下。

• .typeahead(options)：使用预先输入初始化输入。
• .lookup：外部触发查找函数。
• .getActive：要获取当前活动的项目，您将获得一个字符串或 JSON 对象，具体取决于您如何初始化 typeahead。它仅适用于第一场比赛。

示例： 以下示例演示了使用 Bootstrap Typehead 进行动态自动完成搜索。

HTML

  

    
    
    
    
      
    
    
      
    
  
    
        .typeahead {
            width: 50%;
            top: 60px !important;
            left: 50px !important;
        }
    

  

    
        Suggest the states of India
  
        
    
  
    
      
        // Initializes  input( name of states)
        // with a typeahead
        var $input = $(".typeahead");
        $input.typeahead({
            source: [
                "Andhra Pradesh",
                "Arunachal Pradesh",
                "Assam",
                "Bihar",
                "Chhattisgarh",
                "Goa",
                "Gujarat",
                "Haryana",
                "Himachal Pradesh",
                "Jharkhand",
                "Karnataka",
                "Kerala",
                "Madhya Pradesh",
                "Maharashtra",
                "Manipur",
                "Meghalaya",
                "Mizoram",
                "Nagaland",
                "Odisha",
                "Punjab",
                "Rajasthan",
                "Sikkim",
                "Tamil Nadu",
                "Telangana",
                "Tripura",
                "Uttar Pradesh",
                "Uttarakhand",
                "West Bengal",
            ],
            autoSelect: true,
        });
  
        $input.change(function () {
            var current = $input.typeahead("getActive");
            matches = [];
  
            if (current) {
  
                // Some item from your input matches
                // with entered data
                if (current.name == $input.val()) {
                    matches.push(current.name);
                }
            }
        });
    

  

输出：

dynamix 自动预输入