jQuery实现输入框提示并点击回显功能呢

news/2024/7/10 23:57:22 标签: jquery, 前端, javascript

html代码:

<input type="text" id="affOrganization" name="affOrganization" class="form-control" placeholder="Search..." style="width: 300px" >
<div class="search_suggest" id="gov_search_suggest">                                                                                                                  <ul>
</ul>
</div>

css:

.search_suggest{ position:absolute; z-index:999; left:132px; top:41px; width:468px; border:1px solid #999999; display:none; }
.search_suggest li{height:24px; overflow:hidden; padding-left:3px; line-height:24px; background:#FFFFFF; cursor:default;list-style-type:none;}
.search_suggest li{background:#FFFFFF;}
        ul{
            margin-left: 0;
            padding-left: 0;
            margin-bottom: 0;
        }
        .search_suggest{
            margin-left: 0;
            padding-left: 0;
        }
        li.hover{background:#DDDDDD;}

js:

    $("#affOrganization").on('input', function () {
        var orgName = $("#affOrganization").val();
        if (orgName === '') {
            $("#gov_search_suggest").hide();
            return;
        }
        $.ajax({
            url: tool.getHttpPrefixView() + url,
            type: "GET",
            async: false,
            success: function (data) {
                if (data.result.success) {
                    var list = data.rows;
                    if (list.length === 0) {
                        $("#gov_search_suggest").hide();
                        return;
                    }
                    $("#gov_search_suggest").empty();
                    for (let i = 0; i < list.length; i++) {
                        $("#gov_search_suggest").append('<li id="search-result-' + i + '" onclick="Manage.TableOnclick(' + i + ')">' + list[i] + '</li>');
                    }
                    $("#gov_search_suggest").show();
                } else {
                    $("#gov_search_suggest").hide();
                }
            }
        });
    })


    Manage.TableOnclick = function (index) {
        console.log($('#search-result-' + index).html());
        $("#affOrganization").val($('#search-result-' + index).html() + "");
        $("#gov_search_suggest").hide();
    }


http://www.niftyadmin.cn/n/5109986.html

相关文章

VNC Viewer安装教程(保姆级安装)

一、 VNC Viewer简介 VNC是一款开源的远程控制软件&#xff0c;功能强大且高效实用&#xff0c;其性能不逊色同类软件&#xff0c;它的工作原理和WIN远程控制软件类似&#xff0c;但是更为重要的是&#xff0c;VNC-Viewer完全免费开源&#xff0c;更新速度也比较快&#xff01;…

工业自动化控制通信协议Profinet系列-3、CoDeSys软PLC方案介绍

工业自动化控制通信协议Profinet系列-3、CoDeSys软PLC方案介绍 文章目录 工业自动化控制通信协议Profinet系列-3、CoDeSys软PLC方案介绍一、前言二、Profinet搭建资料收集三、CoDeSys系列四、接下来 一、前言 之前在树莓派desktop上已经成功编译运行测试程序&#xff0c;但是还…

【Arduino TFT】基于 ESP32 S7789 320x240 TFT实现的SD2 天气时钟

忘记过去&#xff0c;超越自己 ❤️ 博客主页 单片机菜鸟哥&#xff0c;一个野生非专业硬件IOT爱好者 ❤️❤️ 本篇创建记录 2023-10-21 ❤️❤️ 本篇更新记录 2023-10-21 ❤️&#x1f389; 欢迎关注 &#x1f50e;点赞 &#x1f44d;收藏 ⭐️留言&#x1f4dd;&#x1f64…

开发中的常见安全威胁问题与应对策略

在软件开发过程中&#xff0c;安全性是至关重要的&#xff0c;因为安全漏洞可能导致数据泄露、恶意攻击和系统崩溃。本文将介绍开发中常见的安全性问题&#xff0c;包括不同情景、需要考虑的问题以及相应的解决方案。 1、情景 : 用户身份验证 实际情景 想象一下&#xff0c;您…

数据结构——三路划分(快排优化)

刷Leetcode时遇到的问题&#xff0c;用普通的快排去跑&#xff0c;发现有问题。 普通的Hoare或者其他的快排好像都没有直接解决掉这个问题&#xff0c;当一个数重复出现的时候&#xff0c;用普通的快排效率其实并没有那么高。所以&#xff0c;这也是普通快排的缺点之一。 所以&…

个微多账号聚合聊天管理如何实现?

在日常工作中&#xff0c;我经常遇到以下问题&#xff1a; 1. 微信号众多&#xff0c;需要频繁切换设备和账号&#xff0c;导致工作效率低下。 2. 无法及时回复客户消息&#xff0c;客户体验不尽如人意。 3. 难以随时掌握员工与客户的沟通情况&#xff0c;导致员工沟通质量难…

TCP为什么需要三次握手和四次挥手?

一、三次握手 三次握手&#xff08;Three-way Handshake&#xff09;其实就是指建立一个TCP连接时&#xff0c;需要客户端和服务器总共发送3个包 主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备 过程如下&#xff…