JQuery常用功能

1、自动完成

首先需要HTML的Header引入JQuery的基本库、UI库及CSS

<link href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="js/jquery-1.7.2.min.js" ></script>
<script language="javascript" src="js/jquery-ui-1.8.21.custom.min.js" ></script>    

然后在页面加载完毕后，将自动完成功能绑定到输入框

<script language="javascript">
/* <![CDATA[ */
    $(document).ready(function(){
        $('#ex_explain').autocomplete({
            source: "?action=getExplain",
            minLength: 1});  
    });
    
/* ]]> */
</script>

在输入框输入文字后，当满足minLength最短输入要求的字数后，会通过异步向source指定的URL获取自动完成的候选列表

返回格式要求为JSON格式，对象的属性名为value

//处理异步请求
 if($action=='getExplain')
{
    $aExplain = array();
    $key = trim($_REQUEST['term']);
    $oQuery = $oDb->query("SELECT ex_explain,count(*) n  FROM expense WHERE ex_explain LIKE '{$key}%' LIMIT 0,10");
    while($aRs = $oDb->fetch_array($oQuery))
    {
        $aExplain[] = array('value'=>$aRs['ex_explain']);
    }
    $ret = json_encode($aExplain);
    exit($ret);

}

返回value信息作为下拉列表的项显示出来