使用 jQuery 和 Wikipedia OpenSearch API 自动完成搜索

在网页设计中，自动完成功能是一种常见的功能。当用户在搜索文本框中键入某个值时，它会自动以下拉列表的形式显示相关的建议列表，用户可以轻松选择该列表。对于 jQuery 自动完成功能，请参阅这篇文章。

方法：在本文中，我们使用Wikipedia Opensearch API和 jQuery Autocomplete UI。基本 HTML 代码用于在输入文本框中进行关键字搜索的用户界面。在使用 jQuery 代码时，搜索请求被发送到维基百科，维基百科又返回基于用户输入的建议列表。数据响应采用 JSON 格式。

语法： API 的维基百科 URL

"http://en.wikipedia.org/w/api.php"

设置环境：更多选项设置

https://en.wikipedia.org/w/api.php?action=help&modules=opensearch

开发人员可以参考上述 URL 链接并根据应用程序的需要使用许多选项设置。

jQuery 和 jQuery UI 库：代码中使用了以下文件。

示例：以下示例演示了使用Wikipedia OpenSearch API和 jQuery 的自动完成搜索功能。 HTML 代码提供了一个普通的搜索输入框，当用户键入一些搜索文本时，它会给出建议。

  

    
    
    
    
    
  
    
        body {
            width: 100%;
            background: #e9e9e9;
            margin: 0 auto;
            padding: 0;
            color: #7faf7f;
            font-family: Arial, sans-serif;
            font-size: 12px;
        }
  
        #searchID input {
            width: 350px;
            height: 20px;
            margin: 0;
            padding: 15px;
            background: #fff;
            border: 1px solid black;
            color: #727272;
            float: left;
            font: 12px "Lucida Sans Unicode", sans-serif;
            transition: background 0.4s ease-in-out 0s;
        }
  
        #searchID button {
            width: 45px;
            height: 45px;
            text-indent: -9999em;
            background: url("searchIcon.jpg") #4eac10;
            transition: background 0.3s ease-in-out 0s;
            border: 1px solid #fff;
        }
  
        #containerID {
            width: 50%;
            margin: 0 auto;
        }
  
        h2 {
            color: green;
            text-align: left;
        }
    

  

    
        
            GeeksforGeeks
            
                Autocomplete Search using jQuery
                and Wikipedia Opensearch API
            
  
            
  
            
                
                Search
            
        
    
  
    
        $(".searchClass").autocomplete({
            source: function (request, response) {
                console.log(request.term);
                $.ajax({
  
                    // Wikipedia API url link
                    url:
                    "http://en.wikipedia.org/w/api.php",
                    dataType: "jsonp",
                    data: {
                        action: "opensearch",
                        // Output format
                        format: "json",
                        search: request.term,
                        namespace: 0,
  
                        // Maximum number of result
                        // to be shown
                        limit: 8,
                    },
                    success: function (data) {
                        response(data[1]);
                    },
                });
            },
        });
    

  

输出：