百度搜索框提示栏的原理解决思路-Java教程-爱易网页

百度搜索框提示栏的原理解决思路

日期：2014-05-17　浏览次数：20746 次

百度搜索框提示栏的原理
如题

------解决方案--------------------
沙发不是白坐的 ding
------解决方案--------------------
ding,好像光ding 不起作用。
你可以试着把javascript的功能关了，看一下效果。
------解决方案--------------------
jquery.autocomplete可以达到那个效果
------解决方案--------------------
jquery我不懂，但Ajax也可以达到
------解决方案--------------------
ajax无刷新和异步处理数据！
------解决方案--------------------
输入框挂载onchange事件，获取客户端输入，ajax传回后台，查数据库，查出若干匹配项，装进list，返回给jsp输出，ajax回调方法接收jsp的输出，将输出转为一段段字符串，装进输入框下方的table或div里。
------解决方案--------------------
jquery与AJAX都可以实现。。。
------解决方案--------------------

探讨
jquery与AJAX都可以实现。。。

------解决方案--------------------

探讨
输入框挂载onchange事件，获取客户端输入，ajax传回后台，查数据库，查出若干匹配项，装进list，返回给jsp输出，ajax回调方法接收jsp的输出，将输出转为一段段字符串，装进输入框下方的table或div里。

------解决方案--------------------
ajax 与 css 结合
------解决方案--------------------
页面

HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LC'BLOG</title>
<link href="css/jquery.autocomplete.css" type=text/css rel=stylesheet>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
<script type="text/javascript">
$().ready(function() {
    function formatItem(row) {
        return " <p>"+row[0] +" </p>"+ " <span>" + row[1] + "个结果</span>";
    }
    function formatResult(row) {
        return row[0].replace(/(<.+?>)/gi, '');
    }
    function selectItem(li) {
        makeSearchUrl(document.formkeyword);
    }
    $("#keyword").autocomplete("data.html",
    {
        delay:10,
        matchSubset:1,
        matchContains:1,
        cacheLength:10,
        onItemSelect:selectItem,
        formatItem: formatItem,
        formatResult: formatResult
    }
    );

});
</script>
</head>
<body>


<script type="text/javascript">
 var makeSearchUrl = function(o){
    var keys = o.keyword.value;
    if(keys == "" || keys == "请输入关键字"){
        alert("请输入关键字");
        o.keyword.focus();
        return false;
    }
    keys = encodeURIComponent(keys);
    var url = "/article-search-keyword-"+ keys+".html";
    window.open(url,'_self');
    return false;
}
</script>
<div class="sidebarBlock">
<h5>Search</h5>
<form id="formkeyword" name="formkeyword" method="get" action="search.html" onsubmit="return makeSearchUrl(this)">
<div class="sidebarSearch">
<ul>
<li><input type="text" name="keyword" size="24" maxlength="255" value="" id="keyword" class="text"></input></li>
<li><input type="submit" value="搜索" class="button"></input></li>
</ul>
</div>
</form>
</div>
</body>
</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

百度搜索框提示栏的原理解决思路

相关资料更多>

推荐阅读更多>