文本框智能下拉功能

所属医院: <input type="hidden" name="hid" id="hid" value=""  />
<style>
.tsdoctor ul li:hover,
.tsdoctor ul li.high{  background-color:#CCC;}
</style>
<input type="Text" style="width:150px" name=‘hidname‘ class="yysearch"  value="<?php
                       foreach ($doctor as $item) {
                              if ($item[‘id‘] == $query[‘hospitalID‘]) {
                                  echo $item[‘hospitalName‘];
                              }
                           }
                              ?>"/>
<div  style="margin-left:75px;width:154px;border:#000 groove 1px;display:none;height:300px;overflow-y:scroll;" class="tsdoctor"  >
    <ul id=‘tsul‘ >
     </ul>
</div>
<script>
    var iNow = 0;
    $(‘.yysearch‘).bind(‘keyup focus‘, function() {
        $(‘.tsdoctor‘).show();
        var a= $(this).val();
        a = a.replace(/^\s+|\s+$/g, "");  //去除左右空格
        $.ajax({
           type: "GET",
           url: "/admin/doctor/searchHospitalByKey",
           data: "key="+a,
           success: function(msg){
                 var shizhi = (msg.length)/60; //60为一个单元
              shizhi = shizhi * 50;
              if(shizhi < 30) {  $(".tsdoctor").hide()  }
              if(shizhi > 300){ shizhi = 300; }
              $(‘.tsdoctor‘).css({ height: shizhi});
              $(‘#tsul‘).html(msg);
           }
        });
    });

    $(‘.tsdoctor ul li‘).bind(‘click‘, function() {
        var a= $(this).html();
        $(".yysearch").val(a);
        $(‘.tsdoctor‘).hide();
    });

    function getShoper(id,name){
        $(‘#hid‘).val(id);
        $(".yysearch").val(name);
        $(‘.tsdoctor‘).hide();
    }

    document.onkeydown=jumpPage;
    function jumpPage() {
        if (event.keyCode==38)//上
         fun_b();

        if (event.keyCode==40)//下
        fun_d();

        if(event.keyCode==13){//回车
           //获取当前选中的值
           var hight = $(‘.high‘).html();
           $(‘.yysearch‘).val(hight);
        }
     } 

    function fun_b(){
        iNow--;
        toggleClass();
    }

    function fun_d(){
        iNow++;
        toggleClass();
    } 

    function toggleClass(){
        if(iNow > $(‘.tsdoctor ul li‘).length - 1){
            iNow = 0;
        }else if(iNow < 0){
            iNow = $(‘.tsdoctor ul li‘).length - 1;
        }
        $(‘.tsdoctor ul li‘).removeClass(‘high‘);
        $(‘.tsdoctor ul li‘).eq(iNow).addClass(‘high‘);
    }

</script>
时间: 2024-10-07 16:46:56

文本框智能下拉功能的相关文章

Jquery学习笔记:操作form表单元素之一(文本框和下拉框)

一.概述 在web页面开发中,经常需要获取和设置表单元素的值(如文本框中的内容),特别是在ajax应用中,更是常态.本文系统的介绍下如何操作. 同操作其它html元素一样,操作的过程差不多. 第一步,需要获取到表单元素对应的jquery(或dom)对象.这个主要是利用jquery的选择器机制. 第二步,调用表单元素的属性和方法来获取和设置值. 其中最常见的就是利用jquery对象的val方法.因为很多表单元素都有标准的 value属性,这个可以通过jquery的 val方法来读取和设置属性值.

通过jquery来实现文本框和下拉框动态添加效果,能根据自己的需求来自定义最多允许添加数量,实用的jquery动态添加文本框特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

表单开发(二):获取单选按钮,多行文本框,下拉菜单,捆绑元素数据,用户注册

单选按钮:<input type="radio"> 多行文本框:<textarea rows="5" cols="30"></textarea> 下拉菜单:seclet option <select name="home" ><!--下拉列表--> <option value="北 京">北 京</option> <o

文本框,下拉框,单选框只读状态属性

文本框只读属性:readonly="true" 下拉框只读属性: disabled="disabled" 单选框只读属性: $("#<%=txtIsReply.ClientID%>").click(function () { return false; })

easyui 点击combox 文本框 显示下拉 panel

$(".combo-text").click(function () { var mid = $(this).parent().parent().find("select").attr("id"); $("#" + mid).combobox("showPanel"); });

H5集合文本框和下拉框、ajax提醒为一体

<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" /> <datalist id="autoNames"> <option value="509">T5</option> <option value="709V"

css实现文本框和下拉框结合的案例

html 代码部分 <div id="list-name-input" class="list-name-input"> <select type="text" class="list-select" id="list-select"> <option value=""> </option> <option value="0

实现查询条件文本框、下拉表、复选框页面组装

<form id="content">     <%         if ("OPCODE".equals(dicType)) {     %>     <div id="opCodeCompent"></div>     <%     } else if ("CHANNEL".equals(dicType)) {     %>     <div id=&qu

java简单的实现搜索框的下拉显示相关搜索功能

最近做了一个简单的搜索框下面下拉显示相关搜索的功能,有点模仿百度的下拉展示相关搜索 先上个展示图 : 点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来 搜索框相关搜索的展示很简单,就是根据你的搜索词,去数据库中匹配,是否有类似的搜索词存在,按照搜索词被搜索的次数进行排序显示出来 我设计的是每次搜索一个词,提交之后都会去数据库进行查询,看是否存在这个搜索词的搜索,若存在,则对数据库中的这个搜索词对象进行次数加1,不存在,则创建这个新搜索词对象,保存在