搜索框实现，常用搜索，历史搜索等

1、实现功能

2、页面布局HTML

共三部分

（1）搜索栏

input 框，右边是一个a标签，可以跳转回前一页面。之后写元素用来放置历史搜索和常用搜索。

 <form class="weui-search-bar__form" id="search-form">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" id="searchInput" data-default="取快递" placeholder="搜索" required="">
                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
            </div>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>

分析：weui-icon-serach 就搜索的那个图标，接下来是Input框，后面a标签，class为weui-icon-clear ，是第二张图片中清除的那个图标。id=searchCLear是用来清空搜索框输入内容的。

（2）历史搜索，常用搜索

 <div class="search-prompt-wrapper" id="search-prompt">
        <div class="weui-cells__title" id="historySearch">历史搜索</div>
        <div class="weui-cells"  id="historySearchContent">
            <div class="weui-cell">
                <div id="search-prompt-history" class="content"></div>
            </div>
        </div>
        <div class="weui-cells__title"id="commonSearch">常用搜索</div>
        <div class="weui-cells"id="commonSearchContent">
            <div class="weui-cell">
                <div id="search-prompt-common" class="content"></div>
            </div>
        </div>
    </div>

 这个部分用来放置历史搜索项和常用搜索项。

（3）搜索结果

<li class="goods-wrapper">
    <div class="content">
        <div class="left-user" data-user="">
            <div class="image"><img src=""></div>
            <div class="money"><span></span><img src="../img/task-item/money.png"></div>
            <div class="name"></div>
        </div>
        <div class="right-goods" data-id="">
            <div class="top"><div class="title"></div><div class="type"></div></div>
            <div class="place"><span></span></div>
            <div class="describe"><p></p></div>
            <div class="bottom">
                <div class="time"><span class="time-content"></span></div>
                <div class="operation"><span>抢单</span></div>
            </div>
        </div>
    </div>
</li>

从后台请求获取搜索结果，然后用数据填充shan上面框架。

3、代码分析：js代码如下：

 /*初始化事件*/
    function initEvent() {
        /*获取焦点*/
        $(document).ready(function () {
            $("#searchInput").focus();
        });

        /*点击软键的搜索按钮*/
        $("#search-form").submit(function () {
            var $search_input = $("#searchInput");
            var search = $search_input.val();
            if(search.length == 0) search = $search_input.attr("data-default");
            /* 启动搜索过程 */
            beginSearch(search);
            return false;
        });
        /*点击清空按钮*/
        $("#searchClear").click(function () {
            $("#searchInput").val("");
            $("#searchInput").focus();
            /*更新搜索*/
            updatePrompt();
        });
        /*当内容改变时*/
        $("#searchClear").change(function () {
            var value = $("#searchInput").val();
            if(value.length == 0) $("#searchClear").hide(); else $("#searchClear").show();
        });

        /*点击取消按钮*/
        $("#searchCancel").click(function () {
            location.href="index.html";
        });
    }

 一开始获得用户的常用搜索和历史搜索。

 $.get(ServerUrl + "search/popularHistory",function (data) {
            if(data.status == Status.Status_OK){
                initPromptCommon(data.data);
            }else{
                /*没有常用搜索*/
            }
        });
        /* 历史搜索 */
        $.get(ServerUrl + "search/searchHistory",function (data) {
            if(data.status == Status.Status_OK){
                for(var prompt in data.data){
                    data.data[prompt] = data.data[prompt].searchRecord;
                }
                initPromptHistory(data.data);
            }else{
                /*没有历史搜索*/
            }
        });

        function initPromptCommon(prompts) {
            initPrompt("#search-prompt-common", prompts);
            /* 显示常用搜索 */
            $("#commonSearch").show();
            $("#commonSearchContent").show();
        }
        function initPromptHistory(prompts) {
            initPrompt("#search-prompt-history", prompts);
            /* 显示历史搜索 */
            $("#historySearch").show();
            $("#historySearchContent").show();
        }
        function initPrompt(elm_id, prompts) {
            var $prompt = $(elm_id).empty();
            for(var prompt in prompts){
                $prompt.append('<div class="item" data-search="' + prompts[prompt] + '">' + prompts[prompt]  + '</div>');
            }
            /*点击*/
            $(elm_id + " .item").click(function () {
                var search = $(this).attr("data-search");
                beginSearch(search);
                /*这样用户可以清空！*/
                $("#searchInput").val(search);
            });
        }

请求历史接口，返回的数据格式如下：

执行搜索

 /* 获取第page页，并显示*/
    function getTaskByPage(callback) {
        /*联网获取数据*/
        $.get(ServerUrl + "search/search",{
            keyWord: param.search,
            page: param.page
        },function (data) {
            if(data.status == Status.Status_OK){
                if(data.data.length == 0){ /* 表明已经没有任务了 */
                    param.over = true;
                    if(param.page == 1){
                        $("#show-no-data").show();
                    }else{
                        $.toast("没有更多了", "text");
                    }
                }else{ /* 有任务 */
                    $("#show-no-data").hide();
                    showResult(data.data);
                }
            }else/* if(data.status == Status.Status_NULL_Result)*/{ /* 空结果 */ /*表明出现问题...*/
                param.over = true;
                if(param.page == 1){
                    $("#show-no-data").show();
                }
            }

            /* 执行完成后的回掉 */
            callback();
        });
    }

 4、实现百度模糊搜索大概思路

一开始ul id=search，没有li元素，li元素是在向服务器请求后自动生成。

var searchModule=function(){
    var $searchKey=$("#search");
    var $searchBox=$("searchBox");
   }
function bindData{
   var  searchKey= $searchKey.val();
   $ajax({
     url:""?wd=searchKey;
     dataType:"Jsonp";
     success:function(data){
    //对请求回来的数据进行操作  类似于  callback;
        var str="",
        $each(data,function(index,item){
              if(index<=3){
            str+="<li>"+item"</li">;
                  }
         })
        $searchBox.html(str.stop().slideDown(300));
      }
    })
   }
function init(){
    $search.on("focus keyup",function(){
          var val=$(this).val;
          if(val.length>0){ 
                 bindData();
                 return;
             }
            $searchBox.html(str.stop().slideUp(300));
         })
}