`
baobeituping
  • 浏览: 1068036 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

Jquery的自动填充功能

阅读更多

完成JQUERY的自动填充功能:
首先在页面要去去要填充数据:
页面:
<tr>
    <td nowrap="true">
        设备号:
    </td>
    <td>
        <input type="text" class="TextBox100" id="VehicleNumber"/>
    </td>
   
</tr>

首先设置#VehicleNumber的最小长度为0.
然后去去该文本框中的数据。
然后设置该文本框的点击事件,当点击的时候就去触发显示该下拉列表。
他返回的是JSON数据的格式。

 $("#VehicleNumber").autocomplete({
            minLength: 0
        });
        $.getJSON('@Url.Action("GetVehicleSearchData")', {}, function (data) {
          
            $("#VehicleNumber").autocomplete("option", "source", $.map(data, function (val) { return val.VehicleNumber }))
        });
        $("#VehicleNumber").focusin(function () {
            $("#VehicleNumber").autocomplete("search");
        });

action代码:
首先是定义数据的模型类,也就是我们页面所需要的数据集合;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace RSUWeb.Models
{
    public class InitSearchVehicle
    {
        public string VehicleNumber { get; set; }//车辆编号
      
        public string VehicleTypeNumber { get; set; }//整车型号
     
        public string RsuNumber { get; set; }//RSU编号
       
        public string SimNumber { get; set; }//SIM卡号
    }
}


然后定义ACTION中的查找方法:
 public ActionResult GetVehicleSearchData()
        {
            return Json(positionServiceIndexService.GetVehicleSearchData(), JsonRequestBehavior.AllowGet);
        }
       
服务层代码:
一定要注意的问题,我们不能用我们已经定义好的实例类模型,估计是我定义的实例类模型中有别的对象的引用的
原因,通过实体框架我查找到的是Vehicle类型的对象,然后我通过给我自定义的类型进行赋值,然后再返回给页面。
public List<InitSearchVehicle> GetVehicleSearchData()
        {
            List<InitSearchVehicle> result = new List<InitSearchVehicle>();

            var vehicles = positionServiceIndexRepository.GetMany(vehicle => 1 == 1);
            foreach (var vehicle in vehicles)
            {
                InitSearchVehicle initvehicle = new InitSearchVehicle();
                initvehicle.VehicleNumber = vehicle.VehicleNumber;
                initvehicle.VehicleTypeNumber = vehicle.VehicleTypeNumber;
                initvehicle.RsuNumber = vehicle.RsuNumber;
                initvehicle.SimNumber = vehicle.SimNumber;
                result.Add(initvehicle);
            }
            return result;
        }

分享到:
评论

相关推荐

    jQuery自动填充表单功能代码.zip

    本项目“jQuery自动填充表单功能代码.zip”旨在介绍如何利用jQuery UI的Autocomplete组件来实现表单字段的自动填充功能。这个功能常见于搜索引擎、登录表单和任何需要快速输入建议的场景中,能提升用户体验并减少...

    jQuery自动填充

    【jQuery自动填充】是一种在网页表单中实现数据自动填充的技术,主要应用于提高用户体验,减少用户手动输入的繁琐过程。jQuery库是JavaScript的一个轻量级框架,它简化了DOM操作、事件处理、动画制作和Ajax交互等...

    jquery自动填充插件

    而jQuery自动填充插件(jQuery autoComplete)是jQuery库的一个扩展,专为创建智能搜索和自动补全功能而设计。这个插件能够帮助用户在输入框中快速找到匹配项,提高用户体验,尤其适用于大型数据集的搜索。 **插件...

    jquery-autocomplete 自动填充插件参数使用说明

    总结,jQuery UI Autocomplete插件是一个强大且灵活的工具,能够帮助开发者快速实现自动填充功能。通过理解并巧妙运用其提供的参数,可以定制出满足各种需求的搜索体验,从而提升网站或应用的用户体验。无论是在小型...

    jquery 自动完成功能

    描述中的"下拉选择 自动提示 自动完成"暗示我们将讨论一个基于输入框的自动填充建议系统。 1. **基础原理**: - 用户在输入框(input元素)中输入文字时,触发`keyup`或`input`事件。 - 通过jQuery监听这些事件,...

    jquery自动填充搜索框.zip

    本项目"jquery自动填充搜索框"着重于实现一个功能强大的搜索框,它能够根据用户输入的字符自动填充建议的搜索结果。这个特性常见于许多网站的搜索功能中,为用户提供快速而准确的查询体验。 首先,我们需要理解...

    jQuery底部自动填充瀑布流代码.zip

    【jQuery底部自动填充瀑布流代码】是一个用于网页布局的JavaScript插件,主要应用于网页内容展示,尤其是图片或信息卡片的网格化布局。这种布局方式可以让页面在不同屏幕尺寸下自适应,保持美观的同时提高用户体验。...

    jQuery 禁止表单用户名、密码自动填充功能

    然而,如果你的页面已经使用了jQuery库,并且需要在某些特定条件下禁用自动填充,你可以使用jQuery来控制隐藏输入元素的显示状态。例如,你可以在页面加载后或特定事件触发时隐藏这些元素: ```javascript $...

    使用Jquery定时实现显示隐藏,并且自动填充,,单选判断显示隐藏文本框,小功能

    接着,我们讨论自动填充功能。这通常用于表单字段,可以设置一个定时器来自动填充输入框的值。假设我们有一个id为`autoFillInput`的输入框,我们可以这样做: ```javascript $(document).ready(function() { var ...

    日本都道府县填充,邮编自动填充基于jquery.zip2addr.js实现

    这个项目就是针对这种情况提供的一种解决方案,它利用jQuery库和相关的JavaScript插件来实现自动填充功能。这里我们将详细探讨“日本都道府县填充,邮编自动填充基于jquery.zip2addr.js实现”这一主题。 首先,`...

    autocomplete--jquery自动填充

    - URL:字符串形式的 URL,jQuery UI 将自动发起 AJAX 请求。 4. **其他配置选项** - `minLength`:指定用户输入多少字符后开始提示,默认为 1。 - `delay`:在用户停止输入后,等待多久再发起请求,单位为毫秒...

    搜索栏自动填充Ajax+Jquery

    在本教程中,我们将探讨如何使用Asp.Net后端配合jQuery和Ajax技术来实现类似百度搜索栏的自动填充功能。 首先,我们需要了解基础概念: 1. **Ajax(Asynchronous JavaScript and XML)**:异步JavaScript和XML,是...

    jquery输入框动态填充

    本文将深入探讨如何使用jQuery实现输入框的动态填充功能,这对于提升用户体验和增强网页交互性至关重要。 首先,我们需要理解动态填充的基本概念。在网页中,动态填充指的是根据用户的行为或特定条件,自动在输入框...

    jquery.formautofill 表单填充控件

    jQuery.formautofill是一个轻量级的JavaScript库,它扩展了jQuery的功能,允许开发者通过简单的API调用快速填充表单字段。这个插件特别适合那些需要批量处理或动态生成表单数据的场景,如批量导入、数据预览等。通过...

    jquery自动填充搜索框特效代码

    《jQuery自动填充搜索框特效代码解析与应用》 在网页设计和开发中,提供便捷的用户交互体验至关重要,其中搜索框的自动填充功能是常见的一种优化手段。jQuery,作为一款强大的JavaScript库,提供了丰富的功能来简化...

    JavaWeb ajax异步自动填充信息

    本示例“JavaWeb ajax异步自动填充信息”是一个典型的Ajax应用,模拟了搜索引擎如百度在用户输入时自动填充建议的功能。 首先,我们需要理解Ajax的工作原理。Ajax的核心是XMLHttpRequest对象,它允许JavaScript在...

    jquery+php查询mysql实现自动完成功能

    前端接收到结果后,再展示给用户供其选择或自动填充。 ### 关键技术点 #### jQuery jQuery是一款快速、简洁的JavaScript库,简化了HTML文档遍历、事件处理、动画以及Ajax交互等操作,是实现自动完成功能的前端...

    jquery自动补全功能(java)

    本篇文章将深入探讨如何在Java后端支持下,利用jQuery实现前端的自动补全(Autocomplete)功能,以提高用户体验并优化数据输入流程。 一、jQuery Autocomplete简介 jQuery Autocomplete是jQuery UI库中的一个组件,...

    日本都道府县邮编 自动填充基于jquery.jpostal.js支持

    4. `json` - 这可能是包含日本都道府县和邮编数据的JSON文件,`jquery.jpostal.js`会使用这些数据来执行自动填充功能。 总的来说,这个工具对于在日本进行电子商务、在线表单填写或者需要收集日本用户地址信息的...

Global site tag (gtag.js) - Google Analytics