1. 程式人生 > >自動聯想搜索提示功能

自動聯想搜索提示功能

自動聯想搜索提示功能

<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" style="display: none">

</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));
}
}


本文出自 “PHP/Linux@HeFei” 博客,請務必保留此出處http://liang3391.blog.51cto.com/178205/1976283

自動聯想搜索提示功能