-->

PHP资讯

您的当前位置:首页 > 资讯 > PHP基础

搜索功能模块

2018-07-11 10:31:10  来源:admin 点击:1378

搜索功能
搜索模块分为以下几类
1搜索记录关键词
逻辑:当表单为空是点击弹出,前台操作,不经过后台,案例dome可在本站下载
2搜索提示
逻辑:获取表单的状态,当onkeyup时候触发ajax,后台查询,前台输出
3.搜索高亮
逻辑:最简单的一种直接把遍历出来的用str_replace()替换
4.搜索相关词出现在列表中
后台添加一个keyword的关键词,当你增加相关的词存入这个字段中,查询的时候
5.相关度排序列表

HTML

1.png

搜索记录历史关键词

引入history.js
/**
 * Created by zangfuxiang on 2018/2/6.
 */
var hisTime;
var hisItem;
var firstKey;

$('#inputUser').click(function(){
    input_con=$('#inputUser').val();
    if(input_con==""){
        $('#search-tips').css('display','block');
    }
});
$('#history_close').click(function(){
        $('#search-tips').css('display','none');
});
function init() {
    hisTime = [];
    hisItem = [];
    var i = 0;
    for(;i < localStorage.length; i++) {
        if(!isNaN(localStorage.key(i))) {
            hisItem.push(localStorage.getItem(localStorage.key(i)));
            hisTime.push(localStorage.key(i));
        }
    }
    i = 0;
    $("#delete").html("");
    for(; i < hisItem.length; i++) {
        $("#delete").prepend('' + hisItem[i] + '')
    }

    $('#delete').find('div').on('click',function(){
        var _this = $(this);
        $("#inputUser").val(_this.text());
        $('#search-tips').css('display','none');
    })
}
init();
$("#search-history").click(function() {
    var value = $('#inputUser').val();
    var time = (new Date()).getTime();
    if(!value) {
        return false;
    }
    if($.inArray(value, hisItem) >= 0) {
        for(var j = 0; j < localStorage.length; j++) {
            if(value == localStorage.getItem(localStorage.key(j))) {
                localStorage.removeItem(localStorage.key(j));
            }
        }
        localStorage.setItem(time, value);
    }
    else {
        if(hisItem.length > 9) {
            firstKey = hisTime[0];
            localStorage.removeItem(firstKey);
            localStorage.setItem(time, value);
        } else {
            localStorage.setItem(time, value)
        }
    }
    init();
});
//清除记录功能
$("#history_dele").click(function() {
    var f = 0;
    for(; f < hisTime.length; f++) {
        localStorage.removeItem(hisTime[f]);
    }
    init();
    $('#search-tips').css('display','none');
});

搜索词提示功能

		//js
inputUse=document.getElementById("inputUser");  
function inputFocus(){
    
   this.timer=setInterval(function(){  
        if(inputUse.value!=''){
      $('#search-tips').css('display','none');
            if(inputUse.value!=inputValue){
                inputValue=inputUse.value;  
                showUse.innerHTML='';  
                if(inputValue!=''){
                    quickExpr=inputValue;
                    if(source){   
                        match(quickExpr,inputValue,source);  
                    }      
                }  
            }  
        }  
        else{  
            inputValue=inputUse.value;  
            showUse.innerHTML='';  
            showUse.style.display="none";   
        }  
    },200)
}
function match(quickExpr,value,source){
    var table=null;   
    var tr=null;  
    var td=null;
    table=document.createElement('table');  
    table.id='selector';  
    table.style.width='100%';
   var nn = 0;
    for(var i in source){
        if(nn>9) break;
      letter = source[i].toUpperCase();
      letter = letter.replace(/\s+/g,"");
      letter = letter.replace(/[&\|\\\*^%$#@\(\)\-\ ]/g,"");

      value = value.toUpperCase();
      value = value.replace(/\s+/g,"");
      value = value.replace(/[&\|\\\*^%$#@\(\)\-\ ]/g,"");
      
      if(value.length>0 && !(letter.indexOf(value,0))){
            tr=document.createElement('tr');
            td=document.createElement('td');
            td.innerHTML = ''+source[i]+'';
            tr.appendChild(td);  
            table.appendChild(tr);  
            showUse.appendChild(table); 
         nn++         
        } 
      
    }
    if(showUse.getElementsByTagName('a').length){  
        showUse.style.display="";  
    }else{  
        showUse.style.display="none";  
    }  
}
 function inputKeydown(event){
    event = event || window.event;
    if(event.keyCode==40){
        if(showUse.style.display==""){  
            showUse.getElementsByTagName('a')[0].focus();   
        }else{
            inputUse.focus();
        }
    }
    else if(event.keyCode==38){
           if(showUse.style.display==""){  
            showUse.getElementsByTagName('a')[showUse.getElementsByTagName('a').length-1].focus();  
        }else{
            inputUse.focus();  
        }         
    }
    else if(event.keyCode==9){  
        showUse.innerHTML='';  
        showUse.style.display="none";
    }  
}  
function inputBlur(){
    clearInterval(this.timer);
    var current=0;
    var aArray=showUse.getElementsByTagName('a');  
    var len=aArray.length-1;  
    var select=document.getElementById("selector");
    var aClick = function(){
        inputUse.value=this.childNodes[0].data;
        inputValue=inputUse.value;
        showUse.innerHTML='';  
        showUse.style.display='none';
        inputUse.focus();  
    };
    var aFocus = function(){  
        for(var i=len; i>=0; i--){
            if(this.parentNode===select.childNodes[i].childNodes[0]){ 
                current = i;  
                break;  
            }  
        }
        for(var k in elemCSS.focus){   
            this.style[k] = elemCSS.focus[k];  
        }  
    };
    var aBlur= function(){
        for(var k in elemCSS.blur)  
            this.style[k] = elemCSS.blur[k];  
    };
    var aKeydown = function(event){ 
        event = event || window.event;
        if(event.keyCode===9){  
            showUse.innerHTML='';  
            showUse.style.display = 'none';  
            inputUse.focus();  
        }
        else if(event.keyCode==40){
            current++;
            if(current>len){  
                current=-1;  
                inputUse.focus();  
            }else{  
                select.getElementsByTagName('a')[current].focus();  
            }  
        }
        else if(event.keyCode==38){
            current--;
            if(current<0){  
                inputUse.focus();  
            }else{  
                select.getElementsByTagName('a')[current].focus();  
            }  
        }  
    };
    for(var i=0; i<aArray.length; i++){  
        aArray[i].onclick = aClick;  
        aArray[i].onfocus = aFocus;  
        aArray[i].onblur = aBlur;  
        aArray[i].onkeydown = aKeydown;  
    }  
}

搜索高亮

str_replace($_GET['key'],"".$_GET['key']."",$vo['title']);

搜索相关词出现在列表中

/*增加全部关键词*/
$keywords= trim(strtolower(strtr($keywords, array('+'=>'',' '=>'','-'=>'','('=>'',')'=>'','/'=>'','&'=>'','_'=>'',','=>''))));
//拼接sql语句
$str_where  .= "find_in_set('$keywords',keywords) or find_in_set('$keywords',描述) or title like '%$keywords %' ";
在把$str_where拼接进你的sql语句

相关度排序列表

$sql.='ORDER BY
(
   (
      CASE
      WHEN find_in_set("'.$keywords.'",keywords) THEN
         2
      ELSE
         0
      END
   )
) desc';
$sql.= ', aaa asc';
$sql.= ', bbb asc';
$sql.= ', ccc desc';
//之后拼接到你的sql语句中
分类筛选功能敬请期待
上诉代码不完成,有部分代码因为过滤而导致不能正常显示已经加-(横线)使用时请注意,如有不明白,可留言

相关文章更多 >

© 2024版权所有 水水网

电话:171780793