`

html5 实现输入框实时搜索

 
阅读更多


        function searchText(){
            var content ="";
            var inputVal=$('#siteInput').val();
            var siteNum = {'张三':"桌1", '李四':"桌2"};
            var found = false;
            for( var key in siteNum){
                if(key == inputVal) {
                    content = siteNum[key];
                    found = true;
                }
            }
            if(!found && inputVal != "") {
                content = '未找到';
            }
            $('#siteSearch>p').text(content);
        }

        this.initSearchSite=function() {
            $("input:text").bind("input propertychange",function(){
                 searchText();
            });
        }



分享到:
评论

相关推荐

    AJAX+ASP实现输入框提示

    这个"AJAX+ASP实现输入框提示"的示例项目,旨在展示如何使用AJAX技术在ASP页面上创建一个智能提示系统,当用户在输入框中输入文字时,后台将实时搜索匹配的数据并显示为提示。这种功能在许多Web应用中非常常见,如...

    jquery实现输入框点击出现下拉列表树插件代码

    本示例中的"jquery实现输入框点击出现下拉列表树插件代码"是一个利用jQuery创建的功能,当用户点击输入框时,会弹出一个下拉的树形列表供用户选择。这个功能常见于各种表单输入,如搜索建议、层级结构的选择等,提高...

    鼠标点击拉长的HTML5输入框.rar

    在本案例中,“鼠标点击拉长的HTML5输入框”是一个利用这两种技术实现的动态效果,它使得用户在网页上的搜索体验更加直观和有趣。 首先,HTML5的`<input>`标签用于创建输入字段,通常用于用户输入数据。在这个特定...

    jquery实现input输入框实时输入触发事件代码

    要实现输入框(input)中的内容实时更改时触发特定的事件处理函数,可以使用JavaScript的jQuery库来简化操作。以下知识点将详细解释如何利用jQuery为input输入框绑定一个事件,该事件在用户输入时即时响应,并执行预...

    HTML5实现搜索输入框下拉列表代码.zip

    在HTML5中,实现搜索输入框下拉列表是通过`<datalist>`元素来完成的,这是一种非常实用的功能,可以为用户输入提供预定义的选项,提升用户体验。 在创建搜索输入框下拉列表时,首先我们需要一个`<input>`元素,它...

    html带图标输入框 适合手机端

    为了在输入框前面添加图标,我们可以使用HTML5的`<label>`标签配合`<input>`元素,再借助CSS来实现。例如,我们可以这样设计: ```html 搜索图标"> 搜索"> ``` 这里,`<label>`标签与`for`属性的值对应`...

    asp实现百度输入框效果

    为了提高用户体验,可以添加实时搜索建议功能,即用户在输入框中输入字符时,无需提交表单就能即时看到匹配的搜索建议。这通常通过监听输入事件并利用`xmlhttp.js`中的函数发送AJAX请求来实现。 8. **安全性**: ...

    js实现输入框输入的自动匹配功能

    在JavaScript编程中,输入框自动匹配功能是一种常见的用户体验优化手段,尤其在搜索、表单填写等场景中广泛应用。这种功能可以实时地根据用户输入的内容,从预设的数据集中匹配并展示可能的选项,帮助用户快速找到...

    HTML5搜索输入框下拉列表代码.zip

    在本示例中,"HTML5搜索输入框下拉列表代码.zip" 文件包含了一个实现这一功能的代码库,它利用了HTML5、CSS和jQuery技术,允许开发者快速创建具有动态下拉建议的搜索框。 首先,HTML5提供了`<input type="search">`...

    html5实现输入框fixed定位在屏幕最底部兼容性

    在HTML5中,实现输入框`fixed`定位在屏幕最底部的兼容性是一个常见的挑战,尤其是在面对各种设备、浏览器和输入法的差异时。这里我们将深入探讨如何解决这个问题,并提供几种可能的解决方案。 首先,问题的根源在于...

    js实现input输入框输入信息后出现下拉选择框

    js实现input输入框输入信息后出现下拉选择框,下拉框的数据源可以使根据输入的值从数据库中动态获取

    jquery实现输入框实时输入触发事件代码

    通过本文的介绍,可以看出使用jQuery实现输入框实时输入触发事件并不复杂。关键在于理解各种事件的特性和适用场景,并根据需求选择合适的事件类型和优化技术。这样,便可以轻松实现网页中的各种实时交互功能,提升...

    vue2.0实现移动端的输入框实时检索更新列表功能

    在Vue2.0中,实现移动端输入框实时检索并更新列表功能是一项常见的需求,它能够提升用户体验,使得用户在输入时就能看到与输入内容相关的搜索结果。以下将详细讲解如何利用Vue实现这一功能。 首先,我们需要一个...

    多种漂亮炫酷的输入框特效

    本文将深入探讨如何使用HTML、CSS、JavaScript(包括jQuery和H5 API)来创建各种漂亮且炫酷的输入框特效,以提升用户体验,特别是在搜索页面中的应用。 首先,基础的HTML `input` 元素是构建所有输入框的核心。例如...

    利用javaScript实现点击输入框弹出窗体选择信息

    在本文中,我们主要介绍如何使用JavaScript技术实现一个功能,即当用户点击输入框时,会弹出一个窗体供用户选择信息。这个过程涉及到了JavaScript的基本语法、DOM操作、事件处理以及简单的样式应用等知识点。 首先...

    AJAX+Servlet实现输入框动态提示案例

    本案例“AJAX+Servlet实现输入框动态提示”正是这种技术的实际应用,其主要目标是模拟百度输入框的功能,即用户在输入框中输入文字时,系统能实时提供相关的搜索建议。 1. **Ajax基础**:Ajax的核心是JavaScript...

    源代码-AJAX+ASP实现输入框提示.zip

    【描述】"源代码-AJAX+ASP实现输入框提示.zip"的描述简单明了,表明这个项目的核心是利用AJAX来更新ASP服务器端的动态数据,并将这些数据实时反馈到客户端的输入框中,作为用户输入的提示。这通常涉及到前端与后端的...

    基于ASP的AJAX+ASP实现输入框提示.zip

    【标题】:“基于ASP的AJAX+ASP实现输入框提示”这一主题主要涉及的是在Web开发中如何利用ASP(Active Server Pages)技术和AJAX(Asynchronous JavaScript and XML)技术来实现在用户输入框中提供实时的提示功能。...

Global site tag (gtag.js) - Google Analytics