jquery implements a search box similar to Baidu-JS Tutorial-php.cn

jquery implements a search box similar to Baidu

小云云

Release： 2017-12-04 10:42:03

Original

3000 people have browsed it

As a developer, the search box is also an indispensable function when developing a website. Recently, I need to make a search box at work, similar to Baidu’s search box. In this article, we will share with you about the Jquery implementation of similar Baidu search box.

Need to achieve two functions:

1. Enter keywords and display the matching drop-down list

2. Select the matching item and find related content

This search bar is often used in general e-commerce websites. First, analyze the function implementation. Enter the keyword and immediately display the list of matching items. To implement this function, the input box needs to bind the "input" event, and then send an asynchronous request to the background. The data is displayed on the page. Use the mouse or the up and down keys to select matching items, and click Search or the "Enter" key to search for specific results. Two asynchronous requests are used here, the first requests the matching items, and the second requests the search results. Keyboard, mouse and input box events must be monitored. Flexibility must also be considered, that is, adapting to various similar needs. It is still difficult to do it well. The implementation is distributed as follows.

1.html and css

<body>
    <div id="search-form"></div>
</body>
<style type="text/css">
    *{margin: 0;padding: 0;list-style:none;border:none;}
    body {
        font-family: "microsoft yahei" !important;
        background-color: #FDFFE0;
    }
    :focus {
        outline: none;
    }
    #search-form {
        position: relative;
        top: 50px;
        display: inline;
    }
</style>

Copy after login

2. Import css and js files

Since the blog cannot upload files, you can go to my git: http://git.oschina There is a complete project file on .net/manliu.com/search_frame

3. Page reference js

<script type="text/javascript">
var proposals = [&#39;百度1&#39;, &#39;百度2&#39;, &#39;百度3&#39;, &#39;百度4&#39;, &#39;百度5&#39;, &#39;百度6&#39;, &#39;百度7&#39;,&#39;17素材网&#39;,&#39;百度&#39;,&#39;新浪&#39;];
$(document).ready(function(){
    $(&#39;#search-form&#39;).complete({
        searchIn:function(val){//传入输入值，返回匹配值
            /* var reg = /^[\u4F00-\u9FA5\uF900-\uFA2D]/;
            return reg.test(val); */
            var word = "^"+val+".*";
            var rs = [];
            $.each(proposals,function(i,n){
                if(n.match(word)){
                    rs.push(n);
                }
            });
            return rs;
        },
        width:400,
        height: 30,
        submitIn: function(text){//搜索选定的值
            alert(text);        
        }
    });
});
</script>

Copy after login

The searchIn method here is used to return matching items, usually defining an asynchronous request inside, to The data is fetched in the background and an array is returned. For complex ones, the source code needs to be modified; submitIn is used to search for matching results, and generally can be requested asynchronously or synchronously.

The above content is a tutorial on query to implement a search box similar to Baidu. I hope it can help everyone.

Related recommendations:

Css to create a good-looking search box

How to use Js to implement the Baidu search box prompt function

JavaScript implements imitation Youku search box

The above is the detailed content of jquery implements a search box similar to Baidu. For more information, please follow other related articles on the PHP Chinese website!