`
我是温浩然
  • 浏览: 104798 次
文章分类
社区版块
存档分类
最新评论

如何查看 jquery autocomplete 补全元素的 element

 
阅读更多

在研究自动化测试过程中,

需要根据id,css,或者xpath 获取元素。

但是在系统中,有些自动补全的元素,无论任何操作,都会将自动补全的 选择框 给隐藏掉。


查看 自动补全 的元素步骤如下。

在控制台 的 elements 中,查看所有元素。

只要是 当前页面,有自动补全输入框,肯定有这样一个元素。

<ul></ul>

并且,只要是,自动补全用法如下的,

        $(".searchcomplete").autocomplete({
            source: $("#hiddenContext").text() + "/search/autosuggest",
            minLength: 3,
            select: function(event, ui) {
                $(".searchcomplete").val(ui.item.value);
                $("#global-search-form").submit();
            }
        });
	 $.ajax({
			"dataType" : 'json',
			"type" : "POST",
			"cache" : false,
	       "url" : $('#ctx').val() + '/pages/fdeploy/form/findAllTaskForList',
			"success" : function(response) {
				for(var i in response) {
					var item = response[i];
					item["label"] = " "+item.name;
					
				}
				alert($(this).attr('name'));
				//默认取第一个
				$("#name").autocomplete({
					source: response,
					autoFocus: true,
					delay: 0,
					minLength: 0,
					selectFirst :true,
					select: function(event, ui) {
						$("#name").val(ui.item.name);
						return false;
					}
				});
				
			},
			"error" : function(response) {
				alert("加载异常!");
			}
		});

页面中,肯定有这样一个元素。

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="z-index: 1; display: none;"></ul>
没错,自动补全的元素,就在这个 ul 中。

所有样例,如图下:



只要是找到 element 在 控制台中,就一切完成了。

分享到:
评论

相关推荐

    高级jQuery自动补全插件

    1. **监听输入事件**:jQuery插件通过`$(element).on('input', callback)`监听输入框的输入事件,每当用户输入字符时,回调函数会被触发。 2. **数据匹配**:在回调函数中,插件会根据用户输入的文本与预设的数据源...

    C# jqeury.autocomplete实现自动补全功能

    利用jquery.autocomplete.js插件实现了文本框自动补全的功能, 附件包含两个实例代码,均以txt文档显示,都有前台和后台代码。一个是传一个参数,一个是传两个参数,后台以一般处理程序ashx文件编写。大家只需要修改...

    [ jquery.autocomplete ]jquery的自动完成/补全插件(很好很强大)

    jQuery Autocomplete 是一个非常流行的 jQuery 插件,它为网页表单输入框提供了强大的自动完成或自动补全功能。这个插件极大地提升了用户在输入搜索关键词或填写数据时的体验,使得用户可以快速找到并选择所需的内容...

    jQuery文本框联想补全自动完成插件

    jQuery文本框联想补全自动完成插件是一款非常实用的前端开发工具,它可以帮助开发者在网页的输入框中实现智能联想和自动补全功能。这个插件基于JavaScript库jQuery构建,因此,使用它之前需要确保项目中已经引入了...

    jQuery自动补全

    jQuery自动补全是一种常见的前端开发功能,用于提升用户体验,特别是在输入框中...为了具体实现jQuery自动补全,你需要查看项目代码,找到与自动补全相关的部分,如HTML输入元素、JavaScript代码和可能的数据源文件。

    jquery autocomplete下载

    jQuery Autocomplete是一款非常实用的jQuery插件,它能够为输入框提供自动补全功能,极大地提高了用户在网页上的交互体验。这个插件基于Ajax技术,能够实时从服务器获取数据并展示给用户,使得用户在输入时能快速...

    jquery autocomplete

    - **初始化插件**:通过 `$("#inputElement").autocomplete(options)` 这样的方式来绑定到特定的输入元素,`options` 是一个对象,包含各种配置项,如数据源、搜索函数、显示选项等。 - **数据源**:可以是数组、...

    java 仿google 搜索修正 jquery autocomplete

    本项目旨在利用Java技术栈,结合jQuery的Autocomplete插件,实现一个与Google类似的搜索补全功能,并针对原版插件进行优化,支持用户通过键盘的上下键进行选择,提高交互效率。 首先,我们来看jQuery Autocomplete...

    jquery.autocomplete

    3. **初始化插件**:在合适的元素上应用Autocomplete,通过`$("#element").autocomplete(options)`进行初始化。`options`参数是一个对象,用于设置插件的行为,例如`source`属性定义数据源,`minLength`定义最小输入...

    jQuery 插件demo 自动补全

    在自动补全插件的实现中,一般会有一个输入框元素,我们可以通过`$("#autocomplete-input")`选取这个元素,并使用`.on('input')`或`.on('keyup')`事件监听用户的输入变化。每当输入发生变化时,触发一个函数,该函数...

    jquery.ui.autocomplete 扩展:无限下拉

    jQuery UI库中的Autocomplete组件是实现这一目标的利器,它提供了自动补全功能,常用于搜索框或者输入框,帮助用户快速找到他们想要的内容。本文将深入探讨如何扩展jQuery UI Autocomplete,实现无限滚动的下拉效果...

    jquery complete

    "jQuery Complete"着重关注的是jQuery的Autocomplete功能,这是一个强大的工具,用于实现输入框的自动提示和补全。在网页表单中,用户在输入字段键入内容时,Autocomplete能提供匹配的建议列表,从而提高用户体验。 ...

    jquery点击文本框提示标签自动补全_关键字标签value值提取

    1. jQuery选择器:jQuery提供了丰富的选择器用于选取DOM元素,如`id`选择器(`#id`)、类选择器(`.class`)和元素选择器(`element`)等,它们大大简化了DOM操作。 2. DOM操作:jQuery提供了`$(selector).html()`...

    juery Autocomplete自动完成

    **jQuery Autocomplete** 是一个非常流行的前端开发工具,主要用于实现输入框的自动补全功能,大大提升了用户体验。这个插件是基于广泛使用的JavaScript库——jQuery构建的,它提供了丰富的自定义选项和灵活的配置,...

    jquery插件jquery-ui-1.8.2.custom.min.js

    Widgets是jQuery UI的核心,包括Accordion(手风琴效果)、Autocomplete(自动补全)、Dialog(对话框)等。Effects则提供了各种动画效果,如Fade(淡入淡出)、Slide(滑动)等。Position模块提供了元素相对定位的...

    Ajax自动补全功能

    - 在`search.jsp`中,创建一个输入框和一个用于显示搜索建议的div元素。 ```html &lt;input type="text" id="searchInput" onkeyup="autocomplete()" /&gt; &lt;div id="suggestions"&gt;&lt;/div&gt; ``` - 为输入框添加`...

    jquery ui插件以及示例

    3. **Autocomplete(自动完成)**:为输入框添加自动补全功能,适用于搜索框、地址输入等场景。 4. **Accordion(手风琴)**:将多个内容区域折叠在一起,每次只能展开一个,节省页面空间。 5. **Tabs(选项卡)**...

    JQuery教程自学笔记

    - Autocomplete:自动补全输入框,提高用户输入效率。 - Button:将普通HTML元素转化为美化过的按钮。 - Datepicker:提供日期选择功能,常见于表单输入。 - Dialog:创建弹出式对话框,可用于提示、确认等场景。 - ...

    jqueryui-API(最完整).rar

    - **Autocomplete(自动补全)**: 输入框内提供动态建议,提高用户输入效率。 - **Progressbar(进度条)**: 显示任务进度,增加用户体验反馈。 - **Resizable(可调整大小)**: 让元素可以被用户自由调整大小。 ...

    前端+ jquery-ui-1.13.1.custom

    - **自动完成(Autocomplete)**:输入框自动补全功能,提高用户体验。 **3. 自定义与安装** 这个“jquery-ui-1.13.1.custom”版本已经进行了定制,可能只包含项目所需的部分组件和主题。自定义 jQuery UI 可以按...

Global site tag (gtag.js) - Google Analytics