search
Homephp教程php手册php+ajax实时获取下拉数据程序代码

你点击需要的数据后,这个数据写如到当前输入框,并在后面添加逗号隔开,继续输入的时候,后台处理继续输出数据以供选择.

下面我们来看实例,html代码如下:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
ajax实时获取下拉数据
     
  
  
  
  
<script>// <![CDATA[  
var funjieliu = function(fn, delay){//函数节流  add by shanmao 2013 - 1 - 18  
    var timer = null;  
    return function(){  
        var context = this, args = arguments;  
        clearTimeout(timer);  
        timer = setTimeout(function(){  
            fn.apply(context, args);  
        }, delay);  
    };  
 };  
document.getElementById("tla").onkeyup=funjieliu(function(){//键盘按下的时候  
    var tla = $("#tla").val();  
    if(tla){  
        $.post("/cityosweb/default.php/shanmao/input_xiala",{tla:tla},function(data){  
            if(data.status==1){  
                $(".inul").html("");  
                $.each(data.data,function(index,val){  
                    $(".inul").append("  
                        <li>"+val.username+"  
   
                        ");  
                    });  
            }  
            },"json");  
        }  
    },500);  
$(function(){  
    $(".inul li").live("click",function(){  
        var thval = $(this).html();  
        var tla = $("#tla").val();  
        var regexp = new RegExp(",");  
        if(regexp.test(tla)){//如果input有值(",")则加上input里面的值  
        $("#tla").val(tla+thval+",");  
            }else{  
        $("#tla").val(thval+",");  
                }  
        $(".inul").html("");  
        $("#tla").focus();  
        });  
    });  
// ]]></script>

PHP代码如下:

<?php
function input_xiala(){  
    $input = new input();  
    $tval = $input->post(&#39;tla&#39;);  
    $u = M(&#39;User&#39;);  
    if(strpos($tval,",")){//检查是否带有","  
        $val = explode(",",$tval);//拆分成数组  
        $tval = end($val);//数组的最后一个值  
        }  
    $re = $u->field(&#39;username,email&#39;)->where("username like &#39;$tval%&#39;")->limit(10)->select();  
    $this->ajaxReturn($re,&#39;success&#39;,1);  
    }
?>


永久地址:

转载随意~请带上教程地址吧^^

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.