jquery 百度下拉模糊查询效果

<!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>

解决方案 »

  1.   

    不错，顶一下，不过你的代码有点多，不需要这么多，jquery很精简的
      

  2.   

       我在自学jquery，以前有点JavaScript的代码经验 我想问的是：红色文本框代码中根本没有事件    jquery是怎样去进行模糊查询的    ？绿色代码为什么会根据文本框输入的值去查询，我都快晕了         望大家赐教！！！！   谢！   
      

  3.   

    autocomplete Theme: UI lightness
    jQuery UI提供了这项功能，很方便的
      

  4.   

    $("#keyword").autocomplete("data.html",
    {
    delay:10,
    matchSubset:1,
    matchContains:1,
    cacheLength:10,
    onItemSelect:selectItem,
    formatItem: formatItem,
    formatResult: formatResult
    }
    );
    这个就是给id为keyword的对你加上AUTOCOMPLETE方法
    上面四个是属性，下面三个是相关EVENT的定义
    建议你先去看看相关的基础文档，了解一下JQUERY的插件风格
      

  5.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title></title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <!--   引入jQuery -->
    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(function(){
           $("#filterName").keyup(function(){
          $("table tbody tr")
    .hide()
    .filter(":contains('"+( $(this).val() )+"')")
    .show();
       }).keyup();
      })
    </script>
    </head>
    <body>
    <div>
    <br/>
    筛选：
    <input id="filterName" />
    <br/></div><table>
    <thead>
    <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
    </thead>
    <tbody>
    <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>李四</td><td>女</td><td>浙江杭州</td></tr>
    <tr><td>王五</td><td>男</td><td>湖南长沙</td></tr>
    <tr><td>找六</td><td>男</td><td>浙江温州</td></tr>
    <tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
    <tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
    <tr><td>王六</td><td>男</td><td>浙江杭州</td></tr>
    <tr><td>李字</td><td>女</td><td>浙江杭州</td></tr>
    <tr><td>李四</td><td>男</td><td>湖南长沙</td></tr>
    </tbody>
    </table></body>
    </html>
      

  6.   

    $("#keyword").autocomplete（）；
    你已经给了他事件了，里面有回调函数
      

  7.   

    $().ready(
    function() 
    {
    。
    }
    就表示当页面载入时加载其中的函数，所以当按键的时候就绑定的了事件$("#keyword").autocomplete
    不过这需要另外的脚本支持就是前面引用的jquery.autocomplete.js