点击搜索框输入关键词自动获取数据库中关键词信息并列.....

sanyun

本帖最后由 sanyun 于 2016-1-6 17:12 编辑

搜索界面图：

index.html
<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>搜索框点击输入自动获取数据库关键词信息---sanyun</title>
<link rel="stylesheet" type="text/css" href="./css/aui.css"/>
<style>
         body{

         }
</style>
</head>
<body>
<div id="aui-header">
      <div style="position:fixed;width:100%;margin-top:25px;" class="aui-searchbar-wrap demo" id="search">
      <div class="aui-searchbar aui-border-radius" tapmode>
         <i class="aui-iconfont aui-icon-search"></i>
         <div class="aui-searchbar-text">请输入搜索内容</div>
         <div class="aui-searchbar-input">
                  <input id="searchVal" type="text" placeholder="请输入搜索内容 sanyun" autocapitalize="off">
         </div>
      </div>
      <div class="aui-searchbar-cancel aui-text-info" tapmode>取消</div>
</div>
</div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/jquery.js"></script>
<script type="text/javascript">

$("#search").keyup(function(){
var inval = $("#searchVal").val();
api.sendEvent({
name: 'keyWord',
extra: {
      key1: inval
}
});

});
/*
function sarchAjax(user){
api.ajax({
         url:''+serveUrl+'/searchUserInfo.php',
         method:'post',
         dataType:'json',
         data:{
            values:{
            username: user
            }
         }
},function(ret,err){
         //coding...
         //alert(JSON.stringify(ret));

         if(ret){
         var userlist='';
         for(var i=0;i<ret.length;i++){
         //alert(ret.username);
         userlist+='<li class="aui-list-view-cell" data-win="list_arrow">';
            userlist+=' <div class="aui-arrow-right test">'+ret.username+'</div>';
         userlist+='</li>';
         $(".aui-list-view").html(userlist);
         }
         }
});

}
*/
      apiready = function(){
      api.addEventListener({
name: 'inputValue'
}, function(ret, err){
var value = ret.value;
var keyword = value.key1;
$("#searchVal").val(keyword);

});
      var header = $api.byId('aui-header');
      var header_info = $api.offset('header');
      api.openFrame({
         name: 'search_frm',
         url: './html/search_frm.html',
         bounces:true,
         rect: {
                  x:0,
                  y:75,
                  w:api.winWidth,
                  h:api.winHeight - 75
         }
});
            $api.addCls($api.dom(".aui-searchbar-wrap"),"focus");
            $api.dom('.aui-searchbar-input input').focus();
      };
      function doSearch(){
            $api.addCls($api.dom(".aui-searchbar-wrap"),"focus");
            $api.dom('.aui-searchbar-input input').focus();
      }
      function cancelSearch(){
            $api.addEvt($api.dom(".aui-searchbar-cancel"), 'click', function(){
                     $api.removeCls($api.dom(".aui-searchbar-wrap.focus"),"focus");
            });
      }
</script>
</html>

search_frm.html
<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
<style>
         body{

         }
         .none{
   padding:10px;
}
.list:active{
   background-color:#E0E0E0;
}
</style>

</head>
<body>
      <ul class="aui-list-view">

         </ul>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery.js"></script>
<script type="text/javascript">
function sarchAjax(user){
api.ajax({
         url:''+serveUrl+'/searchUserInfo.php',
         method:'post',
         dataType:'json',
         data:{
            values:{
            username: user
            }
         }
},function(ret,err){
         //coding...
         //alert(JSON.stringify(ret));

         if(ret){
         var userlist='';
         for(var i=0;i<ret.length;i++){

         userlist+='<li id="list'+i+'" class="aui-list-view-cell list" data-win="list_arrow">';
            userlist+=' <div class="aui-arrow-right test">'+ret.username+'</div>';
         userlist+='</li>';
         $(".aui-list-view").html(userlist);
         }
         }else{
         var none='';
         none+=' <p class="none">" <font color="#3498DB">'+user+'</font> "暂无记录</p>';
         $(".aui-list-view").html(none);
         }
});

}
function update(obj){
var id = obj.id;
var username = $("#"+id).find(".test").text();

api.sendEvent({
name: 'inputValue',
extra: {
      key1: username
}

});
}
      apiready = function(){
            api.addEventListener({
name: 'keyWord'
}, function(ret, err){
var value = ret.value;
var inval = value.key1;
sarchAjax(inval);
});
      };
</script>
</html>

zip下载包：

pingfan

点个赞先~

sanyun

谢谢支持..

qingmo

谢谢。。学习学习

早起是病

正好用到哈啊哈谢谢分享

zz123x2012

mark...........................

隐身可见

很好的分享，正好用上

粟曦政

但我在AUI.css里并没有没有找到“aui-searchbar”这种样式。
且，我在官网也没有找到。
请问，是怎么回事？

sanyun

粟曦政发表于 2016-1-23 14:03
但我在AUI.css里并没有没有找到“aui-searchbar”这种样式。
且，我在官网也没有找到。
请问，是怎么回事？ ...

下载最新版就有了

sdaini

楼主你好，我想问一下，后台返回的数据格式是什么样子的呢