类似于百度搜索，搜索关键字，下拉框显示，以及jQuery中添加删除class类，并给class类添加样式

< script>

function getContent(obj){

       $( "#a" ).hide();

           $( "#b" ).hide();

           $( "#c" ).hide();

    var kw = jQuery.trim($(obj).val());

    if (kw == "" ){

        $( "#append" ).hide().html( "" );

        return false ;

    }

    var html = "" ;

   

    for ( var i = 0; i < data.length; i++) {

        if (data[i].indexOf(kw) >= 0) {

            html = html + "<div class='item' οnmοuseenter='getFocus(this)' onClick='getCon(this," +i+ ");' style='height:30px'>" + data[i] + "</div>"

 

        }

    }

    if (html != "" ){

        $( "#append" ).show().html(html);

    } else {

     searchUser();

        $( "#append" ).hide().html( "" );

    }

}

functiongetFocus(obj){

     

    $(".item").removeClass("addbg");

    $(obj).addClass("addbg");

}

/*想要鼠标经过搜索后的一条数据后，颜色变绿，但不能所有的   .item变绿，只让经过的一条变绿，所以要用jQuery添加class，然后在css

 * 中控制颜色,通过$(".item").removeClass("addbg"),搜索出来的所有的 .item都先把addbg的样式去掉，经过的那个当前的

 *obj(也就是getFocus(this)中的this)时，添加addbg的类

 */

</ script>

<  html >

<  body >

      < tr >

        < th > 客户信息: </ th >

        < td >

        < input   style =" margin-bottom : 0px " type = "text" name = "trueName" id = "trueName"                              onKeyup = "getContent(this);" value = "" maxlength = "40"

                placeholder = "输入客户姓名进行查找" />

                   

            < span id = "a" >< br >

               < input type = "text" name = "clientPhone" id = "clientPhone" value = "" maxlength = "40"                   placeholder = "输入客户姓名进行查找" disabled = "true" />

           </ span >

            < span id = "b" >< br >

               < input type = "text" name = " clientPhone" id = "clientEmail" value = "" maxlength = "40"                   placeholder = "输入客户姓名进行查找" disabled = "true" />

          </ span >

           < span id = "c" >< br >

                < input type = "text" name = "clientNickName" id = "clientNickName" value = ""                         maxlength = "40" placeholder = "输入客户姓名进行查找" disabled = "true" />

         </ span >

           < div id = "append" ></ div >

          </ td >

     </ tr >

</  body >

</  html >