像百度搜索框一样,在文本框中输入字符后,自动出现提示下拉框 [问题点数

http://bbs.csdn.net/topics/340144509

 

 

<!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 runat="server">
    <title>Auto Complete</title>
      <style type="text/css">
    
        .hlight{background-color:Red}
        .normal{backgroud-color:transparent;}
    
    </style>
    <script language="javascript" type="text/javascript" src="../../JS/jquery-1[1].3.2.min.js"></script>
    <script>
    function doit(evt)
    {
        evt = (evt) ? evt : ((window.event) ? window.event : "");
        var key = evt.keyCode?evt.keyCode:evt.which;
        if(key==38|key==40|key==13)return;
        var wd = document.getElementById("wd").value;
        if(wd.length==0)return;
        $.ajax({
            url:'../../Example/AutoComplete/Handler1.ashx',
            type:'POST',
            dataType:'json',
            data: "wd="+wd, 
            error:function(x){alert(x.status);},
            success:function(data){$("#show_wd").html(setTable(data)).show();}
        });
    }
    
    //设置拼接Table
    function setTable(jsn)
    {
        if(jsn.s.length==0|jsn.s[0]==""|jsn.s[0]=="undefined")
        {
            document.getElementById("show_wd").style.display="none";
            return"";
        }
        
        var html ="<table id=\"tb\" width=\"100%\">";
        for(var i in jsn.s)
        {
        html+="<tr onmouseover=\"hLight(this)\"><td onclick=\"completeField(this)\">"+jsn.s[i]+"</td></tr>";
        }
        html +="<tr class=\"hlight\" style=\"display:none\"><td>"+document.getElementById('wd').value+"</td></tr>";
        //alert(document.getElementById('wd').value);
        html +="</table>";
        //setDiv();//设置DIV
        //alert(html);
        return html;
    }
    //设置DIV的位置
    function setDiv()
    {
       var txt = document.getElementById("wd");
       var tDiv = document.getElementById("show_wd");
       tDiv.style.width =txt.offsetWidth; + "px";
       var left = calculateOffset(txt,"offsetLeft");
       var top = calculateOffset(txt, "offsetTop") + txt.offsetHeight;
       tDiv.style.border = "black 1px solid";
       tDiv.style.left = left + "px";
       tDiv.style.top = top + "px";
    }
    
    //将该行的数据填充到文本框内
    function completeField(tdvalue)
    {
        document.getElementById("wd").value=tdvalue.innerText; 
        document.getElementById("show_wd").style.display="none";
    }

    //计算控件相对于浏览器的位置
    function calculateOffset(field, attr)
    {
          var offset = 0;
          while(field) {
            offset += field[attr]; 

            field = field.offsetParent;
          }
         return offset;
    }

    //在输入框内点击上下回车
    function KeyDown(evt)
    {
        evt = (evt) ? evt : ((window.event) ? window.event : "") //兼容IE和Firefox获得keyBoardEvent对象
        var key = evt.keyCode?evt.keyCode:evt.which; //兼容IE和Firefox获得keyBoardEvent对象的键值
        if(key==38)
        {
            //上
            lightMove("up");
        }
        if(key==40)
        {
            //下
            lightMove("down");            
        }
        if(key==13)
        {
            //回车
            lightMove("ok");            
        }
    }
    
    //高亮移动
    function lightMove(cmd)
    {
        var tb = document.getElementById("tb");
       
        if(cmd=="up")
        {
            //上
            for(var i=0;i<tb.rows.length;i++)
            {
               if(tb.rows[i].className=="hlight")
                {
                    tb.rows[i].className="normal";
                    i=i==0?tb.rows.length-1:i-1;
                    tb.rows[i].className="hlight";
                    sTxt(tb.childNodes[i].childNodes[0]);
                }  
            }
        }
        if(cmd=="down")
        {
            for(var i=0;i<tb.rows.length;i++)
            {
               if(tb.rows[i].className=="hlight")
                {
                    tb.rows[i].className="normal";
                    i=i==tb.rows.length-1?0:i+1;
                    tb.rows[i].className="hlight";
                    sTxt(tb.childNodes[i].childNodes[0]);
                }  
            }
        }
        if(cmd=="ok")
        {
            for(var i=0;i<tb.rows.length;i++)
            {
               if(tb.rows[i].className=="hlight")
                {
                   completeField(tb.rows[i]);
                }  
            }
        }
    }
    //将输入的内容写进Table
    function insTR(tb)
    {
        var new_tr = tb.insertRow(tb.rows.length);
        var new_td = new_tr.insertCell();
        new_td.innerText=document.getElementById("wd").value;
        new_tr.style.display="none";
        new_tr.className="hlight";
    }
    //将数值写入文本框
    function sTxt(td)
    {
    //alert(td.innerText);
        document.getElementById("wd").value=td.innerText;
    }
    //高亮某行
    function hLight(tr)
    {
        var tb = document.getElementById("tb");
        for(var i=0;i<tb.rows.length;i++)
        {
           if(tb.rows[i].className=="hlight")
            {
                tb.rows[i].className="normal";
                break;
            }  
        }
        tr.className="hlight";
    }

    window.onload = function()
    {
        setDiv();
    }
        </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input id="wd" type="text" style="width: 500px" autocomplete="off" onkeypress="doit(event)"
                onkeydown="KeyDown(event)" />
            <div id="show_wd" style="position: absolute; font-size: 12px; display:none">
            </div>
    </div>
    </form>
</body>
</html>

 

 

 

 

 

要实现在Compose输入内容并在下拉框显示搜索结果,您可以使用`Autocomplete`组件和自定义的搜索逻辑。以下是一种可能的实现方法: 1. 首先,在您的Compose项目,确保已导入所需的依赖项: ```kotlin implementation 'androidx.compose.material:material:1.0.0-alpha03' ``` 2. 创建一个可变的`state`来存储搜索关键字和搜索结果: ```kotlin var searchKeyword by remember { mutableStateOf("") } var searchResults by remember { mutableStateOf(emptyList<String>()) } ``` 3. 在您的Compose界面,使用`Autocomplete`组件来实现搜索框下拉框: ```kotlin Autocomplete( value = searchKeyword, onValueChange = { keyword -> searchKeyword = keyword // 执行搜索逻辑,更新搜索结果 searchResults = performSearch(keyword) }, label = { Text(text = "搜索") }, options = searchResults, onOptionSelected = { selectedResult -> // 处理选的搜索结果 handleSearchResult(selectedResult) } ) ``` 在上述代码,`Autocomplete`组件用于实现搜索框下拉框功能。通过`value`和`onValueChange`属性,我们可以跟踪搜索关键字,并在关键字变化时触发搜索逻辑。 4. 创建一个函数`performSearch`来执行搜索逻辑,并返回搜索结果: ```kotlin fun performSearch(keyword: String): List<String> { // 根据关键字执行搜索逻辑,返回搜索结果列表 // 示例,假设搜索结果是一个字符串列表 val results = listOf("结果1", "结果2", "结果3") return results.filter { it.contains(keyword, ignoreCase = true) } } ``` 在上述示例,`performSearch`函数接收关键字作为输入,并根据关键字执行搜索逻辑。您可以根据实际需求实现自己的搜索逻辑,并返回符合搜索条件的结果列表。 5. 创建一个函数`handleSearchResult`来处理选的搜索结果: ```kotlin fun handleSearchResult(result: String) { // 处理选的搜索结果 // 示例,打印选的结果 println("选的结果:$result") } ``` 在上述示例,`handleSearchResult`函数接收选的搜索结果作为输入,并执行相应的处理逻辑。您可以根据实际需求自定义处理逻辑。 通过以上步骤,您就可以在Compose实现在搜索框输入内容,并在下拉框显示搜索结果了。根据您的需求,您可以进一步自定义和调整样式以满足您的设计要求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值