自动联想搜索提示功能
更新:HHH   时间:2023-1-7


<script type="text/javascript">    //定义当前页面的url地址
    var currentUrl = "<?=urldecode(Url::toRoute(['/article/default/index']))?>";
    var AutoComplete = "<?=urldecode(Url::toRoute(['/article/default/autocomplete']))?>";
    var repositorytypehandle= "<?=urldecode(Url::toRoute(['/article/default/handle']))?>";
</script>

   <input type="hidden" name="kws" value="" />
   <input id="ids" type="hidden" name="ids" value=""  class="form-control">
   <input id="choxq" name="choxq" type="text" class="kwarticle form-control inline" autocomplete="off" placeholder="请输入关键词进行搜索">
   <ul class="choul" >

</ul>

   :
$(".kwarticle").keyup(function (){
    var q = $.trim($(".kwarticle").val());
    var id="<?=$id?>"
    var pId="<?=$pId?>"
    $('[name="kws"]').val(q);
    if (!q) {
        $(".choul").css("display", "none");
        return false;
    }
    var data = "&q="+q+"&id="+id+"&pId="+pId;
    $.ajax({
        url: AutoComplete,
        data: data,
        type: 'GET',
        dataType: 'json',
        timeout: 1000,
        cache: false,
        success: succFunction //鎴愬姛鎵ц鏂规硶
    });
    function succFunction(tt) {
        $(".choul").html('');

        var json = eval(tt); //鏁扮粍
        // alert(tt);
        $.each(json, function (index, item) {
            //寰幆鑾峰彇鏁版嵁
            var name = json[index].title;
            var id = json[index].id;
            $(".choul").append("<li data="+id+">"+name+"</li>");
        });
        if (json.length== 1) {
            //寰幆鑾峰彇鏁版嵁
            var name = json[0].title;
            var id = json[0].id;
            $('[name="ids"]').val(id);
        }
    }
    $(".choul").css("display", "block");
});
$(document).on("click",".choul li",function  () {
    $(".kwarticle").val($(this).text());
    $(".choul").css("display", "none");

    var selectvalue=$(this).text();
    var id=$(this).attr('data');
    $('[name="ids"]').val(id);
    $('[name="choxq"]').val(selectvalue);
})
public function actionAutocomplete(){

   $this->layout = false;
   $q = Yii::$app->request->get('q');//联想输入词
   $params = Yii::$app->request->get();
   if(empty($q)){
       $output = array(
           'status' => 2,
           'tips' => '暂无数据',
           'data' => array(),
       );
       echo json_encode($output);
       exit;
   } else{
       $query=Article::find();
       $query->select('*');
       if(!empty($params['id'])&&empty($params['pId'])){//取主分类下面的所有子分类文章且不是搜索过来的情况
           $sonlist=\app\models\RepositoryType::find()->where(['pId'=>$params['id']])->asArray()->all();
           $arr='';
           foreach($sonlist as $k=>$v){
               $arr.=','.$v['id'];
           }
           $query->where(['repositoryId'=>explode(',',$arr)]);
       }elseif(!empty($params['id'])&&!empty($params['pId'])){
           $query->where(['repositoryId'=>$params['id']]);
       }
       $query->andWhere(['isDel'=>2]);
       $query->orderBy('createTime desc');
       $query->asArray();
       $data=$query->all();
      // $data = Article::find()->where(['like','title',$q])->asArray()->all();
       if (!empty($data)) {
           $output = array(
               'status' => 1,
               'tips' => '',
               'data' => $data,
           );
       } else{
           $output = array(
               'status' => 2,
               'tips' => '暂无数据',
               'data' => array(),
           );
       }

       header('Content-Type:application/json; charset=utf-8');
       exit(json_encode($data,0));
   }
}


返回web开发教程...