+ -
当前位置:首页 → 问答吧 → 共享一个用Jquery写的仿GOOGLE的搜索提示功能

共享一个用Jquery写的仿GOOGLE的搜索提示功能

时间:2009-02-23

来源:互联网

[code]
findtext.html
<script src="../jquery.js"></script>
<script src="../findtext.js"></script>
<input id="searchKey" name="textfield" type="text"   value=""/>
<div id="searchKeyTip" name="searchKeyTip">这个就是搜索提示框,样式自定</div>
--------------------------------------------------------------------------------------------------
findtext.js

$(function(){
  $("#searchKeyTip").hide();
  $("#searchKey").keyup(function(){
         var key = $("#searchKey").val();
         $.getJSON(
             "../textfind.php",
             {keys:key},
             function(json){
                $("#searchKeyTip").show();
                $("#searchKeyTip").html(json);
          });
   });
  $("#searchKeyTip").hover(
      function(){
        $(this).show();
      },
      function(){
        $(this).hide();
      }
  );
});
--------------------------------------------------------------------------------------------------
findtext.php

include_once"dbConnect.class.php";
$db = new dbConnect();
$textinput = strip_tags(htmlentities(stripslashes($_GET['keys'])));
$sql="SQL语句"+$textinput;
$rows = $db->query_array($sql);
if(!empty($rows)){
foreach($rows as $v){
  $text = trim($v['搜索结果字段名']);
  $result .= "<a onclick='$(\"#searchKey\").val(\"".iconv("GBK", "UTF-8","$text")."\")' >".iconv("GBK", "UTF-8","$text").'</a>';
}
}else{
  $result = iconv("GBK", "UTF-8","没有找到相关文件,请重新指定");
}
echo json_encode($result);

[/code]如有更好的方法。。。可以跟帖。。。相互交流下。。。

作者: xile   发布时间: 2009-02-23