PHP实例代码:模仿百度搜索时输入内容带提示
发布时间：2019-04-13浏览次数：873
<p>
</p>
<table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr>
<td style="WORD-WRAP: break-word" bgcolor="#fdfddf">
<font color="#ff0000">WebjxCom提示：</font><font color="#000000">PHP+JS模仿的百度搜索输入提示功能.</font>
</td>
</tr></tbody></table>
<p>自己用PHP + js模仿的百度搜索时输入内容带提示的功能，运行的话需要PHP环境。也算是自己的一个练笔题吧，和大家分享一下</p>
<p><?php<br>        $aName = array("王成","王瑞","王祥","何武昌","何睿","何好","马兴","马成栋","张相","张祥");<br>        $aId = array(88801,11144,2345,9023,12415,88021,11145,2344,11145,0376);<br>        foreach($aName as $k =>$val)<br>        {<br>                $json[$k] = array(<br>                        'id' => $aId[$k],<br>                        'name' => $val<br>                );        <br>        }</p>
<p>/**************************************************************<br>*<br>*  使用特定function对数组中所有元素做处理<br>*  @param  string  &$array     要处理的字符串<br>*  @param  string  $function   要执行的函数<br>*  @return boolean $apply_to_keys_also     是否也应用到key上<br>*  @access public<br>*<br>*************************************************************/<br>function arrayRecursive(&$array, $function, $apply_to_keys_also = false)<br>{<br>    static $recursive_counter = 0;<br>    if (++$recursive_counter > 1000) {<br>        die('possible deep recursion attack');<br>    }<br>    foreach ($array as $key => $value) {<br>        if (is_array($value)) {<br>            arrayRecursive($array[$key], $function, $apply_to_keys_also);<br>        } else {<br>            $array[$key] = $function($value);<br>        }<br>        if ($apply_to_keys_also && is_string($key)) {<br>            $new_key = $function($key);<br>            if ($new_key != $key) {<br>                $array[$new_key] = $array[$key];<br>                unset($array[$key]);<br>            }<br>        }<br>    }<br>    $recursive_counter--;<br>}<br>/**************************************************************<br>*<br>*  将数组转换为JSON字符串（兼容中文）<br>*  @param  array   $array      要转换的数组<br>*  @return string      转换得到的json字符串<br>*  @access public<br>*<br>*************************************************************/<br>function JSON($array) {<br>    arrayRecursive($array, 'urlencode', true);<br>    $json = json_encode($array);<br>    return urldecode($json);<br>}<br>?><br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head><br>        <meta content="text/html;charset=gb2312" http-equiv="content-type" /><br>           <style type="text/css"><br>                .name{cursor:pointer;}<br>                .selected{background:#CCC;}<br>                .normal{background:#FFF;}<br>    </style><br></head><br><table align="center"><br>        <tr><br>            <td>输入测试：</td><br>        <td><input type="text" style="color:" id="neirong" onkeyup="tip(event,0)"/></td><br>    </tr><br></table><br><div id="showMessage" style="border:1px #666 solid;"><br></div><br><script type="text/javascript"><br>        window.onload = function(){<br>                var tag = document.getElementById("showMessage");<br>                tag.style.display = "none";<br>        }<br>        function tip(event) {<br>                var aUserName = new Array();<br>                var aTempName, aUserName, tag, sVal, sHtml, mesTag, selectedTag, didTag, widths;<br>                var postion = new Array();<br>                var sId = 0;//用于给每个名字加一个id的顺序<br>                var whichType;//用户输入的类型，是数字呢还是中文。<br>                aUserName = <?php echo JSON($json); ?>;<br>                //aUserName = eval('(' + aTempName + ')');<br>                tag = document.getElementById("neirong");<br>                didTag = document.getElementById("did");<br>                //输入框坐标获取<br>                postion = getElementPos(tag);<br>        <br>                //显示div坐标调整<br>                mesTag = document.getElementById("showMessage");<br>                mesTag.style.position = "absolute";<br>                mesTag.style.left = postion[0]<br>                mesTag.style.top = postion[1];<br>                widths = tag.style.width + "px";<br>                mesTag.width = widths;<br>                var event = event || window.event;<br>                var sKeyCode = event.keyCode;<br>                var aShangXia = new Array(37,38,39,40);<br>                var isDerection;<br>                sVal = tag.value;<br>                //以enter作为用户输入结束标志<br>                if(13!=sKeyCode) {<br>                        for(var i in aShangXia) {<br>                                if(sKeyCode == aShangXia) {<br>                                        isDerection = false;        <br>                                        break;<br>                                }        <br>                                else {<br>                                        isDerection = true;        <br>                                }<br>                        }<br>                        if(isDerection) {<br>                                sHtml = '';<br>                                if(""==sVal) {<br>                                        mesTag.style.display = "none";<br>                                        mesTag.innerHTML = sHtml;<br>                                        return false;        <br>                                }<br>                                else {                                <br>                                        sHtml = '<table width="146px" border="0" id="showTable">';<br>                                        if(checkVal(sVal)) {<br>                                                for(var i in aUserName)<br>                                                {<br>                                                        if(0<=aUserName[i].id.indexOf(sVal)) {<br>                                                                sHtml = sHtml + '<tr><td class="normal" onclick="clickToChoice('+sId+')" onmouseover="changeColor(true,'+sId+')" onmouseout="changeColor(false,'+sId+')" id="p_'+sId+'" readonly="readonly">'+aUserName[i].id+'_'+aUserName[i].name+'</td></tr>';<br>                                                                sId = sId + 1;<br>                                                        }<br>                                                }        <br>                                        }<br>                                        else {<br>                                                for(var i in aUserName)<br>                                                {        <br>                                                        if(0<=aUserName[i].name.indexOf(sVal)) {<br>                                                                sHtml = sHtml + '<tr><td class="normal" onclick="clickToChoice('+sId+')" onmouseover="changeColor(true,'+sId+')" onmouseout="changeColor(false,'+sId+')" id="p_'+sId+'" readonly="readonly">'+aUserName[i].id+'_'+aUserName[i].name+'</td></tr>';<br>                                                                sId = sId + 1;<br>                                                        }<br>                                                }<br>                                        }<br>                                        sHtml = sHtml + '</table>';<br>                                        if(0!=sId) {                <br>                                                mesTag.style.display = "";<br>                                                mesTag.innerHTML = sHtml;<br>                                                sHtml = '';        <br>                                        }<br>                                        else {<br>                                                mesTag.innerHTML = '没有结果';        <br>                                        }<br>                                }<br>                        }<br>                        else<br>                        {<br>                                if(38==sKeyCode||40==sKeyCode) {<br>                                        dance(sKeyCode,sVal,tag);<br>                                }                <br>                        }        <br>                }<br>                else {<br>                        if(''!=tag.value) {<br>                                mesTag.innerHTML = '';<br>                                showMessage.style.display = 'none';<br>                        }<br>                        else {<br>                                return false;        <br>                        }        <br>                }<br>        }</p>
<p>        function checkVal(sVal){<br>                var patrn = /^[0-9]/;        <br>                if(patrn.exec(sVal)) {<br>                        return true;<br>                }<br>                else {<br>                        return false;        <br>                }<br>        }<br>        //获取用户通过点击的名字<br>        function clickToChoice(sqnm) {<br>                var choicedTag, mesTag, showTag;<br>                choicedTag = document.getElementById("p_"+sqnm);<br>                mesTag = document.getElementById("neirong");<br>                showTag = document.getElementById("showTable");<br>                mesTag.value = choicedTag.innerHTML; <br>                showMessage.style.display = 'none';<br>        }<br>                <br>        function dance(sKeyCode,sVal,tag) {<br>                var danceTag = getElementsByClassName("normal");//这个是正常的行<br>                var danceingTag = getElementsByClassName("selected");//这个是前一个被选中的行<br>                var selectedTag, lastTag, showTag, selectedVal, currentNum, initial;<br>                var rowNums, selectedNum = 0;<br>                var danceLen = danceTag.length;<br>                if(0 != danceingTag.length) {<br>                        showTag = document.getElementById("showTable");<br>                        rowNums = showTag.rows.length;<br>                        currentNum = danceingTag[0].id.split("_")[1] * 1;<br>                        switch(sKeyCode) {<br>                                case 40:<br>                                        if(rowNums == (currentNum + 1)) {<br>                                                selectedNum = 0;        <br>                                        }                <br>                                        else {<br>                                                selectedNum = currentNum + 1;<br>                                        }<br>                                        break;<br>                                case 38:<br>                                        if(0 == currentNum ) {<br>                                                selectedNum = rowNums - 1;        <br>                                        }                <br>                                        else {<br>                                                selectedNum = currentNum - 1;<br>                                        }<br>                                        break;<br>                        }<br>                }<br>                else {<br>                        switch(sKeyCode) {<br>                                case 40:<br>                                        currentNum = danceTag.length - 1;<br>                                        selectedNum = 0;<br>                                        break;<br>                                case 38:<br>                                        currentNum = 0;<br>                                        selectedNum = danceTag.length - 1;        <br>                                        break;<br>                        }        <br>                }<br>                <br>                lastTag        = document.getElementById("p_"+currentNum);        <br>                lastTag.className = "normal";<br>                selectedTag = document.getElementById("p_"+selectedNum);        <br>                selectedVal = selectedTag.innerHTML;<br>                selectedTag.className = "selected";<br>                tag.value = selectedVal;<br>                                <br>        }<br>        function changeColor(type,sqnm) {<br>                var tag = document.getElementById("p_"+sqnm);<br>                if(type) {<br>                        tag.className = "selected";<br>                }<br>                else {<br>                        tag.className = "normal";        <br>                }        <br>        }<br>        <br>        function getElementsByClassName(n) {<br>                var classElements = [],allElements = document.getElementsByTagName('*');<br>                for (var i=0; i< allElements.length; i++ )<br>                {<br>                        if (allElements[i].className == n ) {<br>                                classElements[classElements.length] = allElements[i]; //某类集合<br>                        }<br>                }<br>                        return classElements;<br>        }</p>
<p>        <br>        function getElementPos(tag) {<br>      &
付款方式
苹果客户端
安卓客户端
官方微信
新浪微博
TOP
