标签: jquery-ui-autocomplete
JQuery UI 自动完成的键盘事件
我已经重写了 AC 的 HTML 以使用表格，鼠标悬停效果和选择效果相同，但向上键和向下键现在没有任何效果。如何使关键事件与 AC 表配合使用？
globalSearch._renderItem = function(table, item) {
return $( '<tr class="result-row"></tr>' )
.data( "item.autocomplete", item )
.append('<td class="ac-search-col"></td>'+
'<td class="result-img-col"><img src="x" /></td>'+
'<td class="result-info">'+item.val'</td>')
.appendTo( table );
});
globalSearch._renderMenu = function(ul, items) {
var self = this;
ul.append('<table class="ac-search-table"></table>');
$.each( items, function( index, item ) {
self._renderItem( ul.find("table"), item );
});
};
编辑：
这是小提琴： http: //jsfiddle.net/CpTAh/24/
推荐指数
解决办法
查看次数
Jquery自动填充建议 - 小字体列表
Jquery自动填充建议列表字体非常大,我想要像输入文本框字体需要一样小.如何在建议列表中限制小字体？请参阅以下屏幕和代码:
<!DOCTYPE>
<html>
<head>
<title>Auto Complete in JSP Java</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<STYLE TYPE="text/css" media="all">
.ui-autocomplete {
position: absolute;
cursor: default;
height: 200px;
overflow-y: scroll;
overflow-x: hidden;}
</STYLE>
<script>
$(function() {
$("#names").autocomplete({
source: function(request, response) {
$.ajax({
url: "searchName.jsp",
type: "POST",
dataType: "json",
data: { name: request.term},
success: function( data, textStatus, jqXHR) {
var items = data;
response(items);
},
error: function (error) {
alert('error: ' + error);
}
});
},
minLength: 3
});
});
</script> …推荐指数
解决办法
查看次数
意外的令牌<在JSON的位置2 jquery自动完成
我有一个jQuery"autocomplete"的AJAX请求,如下面的代码:
var clientesList = [];
$("#clientes").autocomplete({
source: function (request, callback) {
$.ajax({
type: "POST",
url: "../../../Cliente/GetClientesByName",
data: "{'nome':'" + request.term + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
debugger;
callback($.map(data.cities, function (obj) {
return obj.Main
}))
}
})
}
})
触发事件时,错误显示在jquery.min中？
"创建:2未捕获的SyntaxError:意外的令牌<在位置2的JSON中"
我的输入HTML是这样的:
<input type="text" id="clientes" class="form-control col-md-10" />
推荐指数
解决办法
查看次数
jQuery 自动完成以编程方式搜索和选择第一选择（如果有）
这应该很简单，但是 StackOverflow 中的所有解决方案似乎都不适合我......
使用 jQuery 2.1.0，我使用 Ajax 源、autoFocus: true 和一个 select: function (event, ui) { ... } 设置了一个自动完成功能，为我提供键/值对组合。
一旦我开始在输入字段中输入，我就会得到作为 DDL 的正确选项，然后我可以使用鼠标进行选择。
但是，我现在想以编程方式触发自动完成搜索，然后选择第一个选项（如果可用）。
我像这样触发搜索：
Preparer.autocomplete('search', LoginName);
可用选项正确显示，但我似乎无法以编程方式选择第一个！
我尝试调用 .select()，我尝试在控件中触发按键 13 和 9，甚至尝试在 setTimeout 函数中执行操作以确保正确呈现对话框！
我什至尝试设置选项 { selectFirst: true }，但仍然没有......
还有什么我可以尝试的吗？？
推荐指数
解决办法
查看次数
如何在 Jquery 3.4.1 和 Jquery-ui 1.12.1 中启用 CSP（内容安全策略）？
我目前在我的网站上使用jQuery 3.4.1和jQuery-UI 1.12.1（用于自动完成）。我也在用unsafe-inline，但unsafe-eval我不想用。
我的<meta/>标签：
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-eval' https: cdnjs.cloudflare.com code.highcharts.com stackpath.bootstrapcdn.com cdn.jsdelivr.net code.jquery.com 'unsafe-inline'; connect-src 'self' news.google.com; worker-src 'self'; manifest-src 'self';"
>
展开后，即content：
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-eval' https: cdnjs.cloudflare.com code.highcharts.com stackpath.bootstrapcdn.com cdn.jsdelivr.net code.jquery.com 'unsafe-inline'; connect-src 'self' news.google.com; worker-src 'self'; manifest-src 'self';"
>
每当 AJAX 调用在 jQuery-UI 自动完成中发生时，它都会抛出一个错误，指出它违反了 CSP 策略。
我需要做什么才能使用 jQuery 在我的网站上正确启用 CSP？我不想在我的网站上使用unsafe-evaland unsafe-inline。
控制台错误：
javascript jquery jquery-ui-autocomplete content-security-policy
推荐指数
解决办法
查看次数
来自文本源的jQuery-ui-autocomplete
我尝试使用autocomplete jquery-ui脚本,但是从文档中解释说远程源必须返回一个json数据,它不是在讨论纯文本响应,而是在jsp/servlet中开发我的应用程序而我不知道如何创建json数据.
所以我发现了另一个jquery自动完成插件 - > java自动完成功能
本教程和脚本工作得很好,但脚本没有我需要的相同选项.我尝试保持相同的getdata.jsp和servlet页面以适应jquery-ui-autocomplete只更改脚本的链接,firebug说我对请求的正确响应但是没有显示!
JavaScript调用:
<script>
$(function() {
$( "#responsable" ).autocomplete({
source: "getdata.jsp",
minLength: 2
});
});
</script>
这是getdata.jsp文件:
<%@page import="java.util.Iterator"%>
<%@page import="java.util.List"%>
<%@page import="fr.myldap.model.*"%>
<%
PersonneDB db = new PersonneDB();
String query = request.getParameter("term");
List<Personne> personnes = db.getData(query);
Iterator<Personne> iterator = personnes.iterator();
while(iterator.hasNext()) {
String personne = (String)iterator.next().getNomComplet();
out.println(personne);
}
%>
这是返回人员列表的PersonneDB类
package fr.myldap.model;
import java.util.ArrayList;
import java.util.List;
public …java jquery firebug jquery-autocomplete jquery-ui-autocomplete
推荐指数
解决办法
查看次数
jqueryUI自动完成与额外的数据？
我想将一些其他数据附加到框中的结果列表中.例如,我的数据集可能如下所示:
[
{
"name": "John's wild bacon emporium",
"code": "BACON"
},
{
"name": "Jill and Jack's well",
"code": "WELL"
},
{
"name": "Herp and derp",
"code": "HD"
}
]
但是jQueryUI文档说它需要一个扁平的字符串数组.
用户将按名称搜索,而不是代码(让我们假装).更重要的是,我希望能够在查看时访问该代码select: function(event, ui) {/*...*/},无论是通过data-xxx还是其他一些伏都教.我想避免使用第二个列表来匹配标签内容的字符串(假设我们可以以某种方式重复名称,用户永远不会感到困惑),我只想将代码数据粘贴到名称标签上.
推荐指数
解决办法
查看次数
用黄瓜测试JQuery自动完成ui
我有这个黄瓜sceanario:
When I fill in "End User" with "john"
Then wait
Then wait
When I click "John Doe"
Then show me the page
步骤定义:
Then /^wait$/ do
sleep 2
end
When /^(?:|I )click "([^"]*)"$/ do |selector|
find(":contains('#{selector}')").click
end
它通过但它没有选择用户."最终用户"等于"向我显示页面"中的"约翰".
我甚至无法让它在JavaScript控制台中工作.以下代码不会选择任何内容.
$(":contains('John Doe')").last().trigger('click')
# => [<a class=?"ui-corner-all" tabindex=?"-1"...
如何编写自动完成选择脚本？无论是纯粹的javascript还是黄瓜.
推荐指数
解决办法
查看次数
将结果分组到JQuery UI Autocomplete插件？
我正在尝试使用自动完成功能在多种类型的数据中创建一些搜索功能.我更希望为每个自动填充建议提供自定义视图,以及根据类型对建议进行分组.这些小组也应该分开.
如果我的解释很差,您可以在hotels.com上看到搜索功能的示例:建议根据城市,地标,机场等进行分组.
我一直在关注JQuery UI Autocomplete插件,它似乎能够完成我需要的大部分工作,但我还没有看到任何分组的例子.
由于我的javascript/JQuery技能有点缺乏,我希望有人可以告诉我是否有可能实现我想要的Autocomplete插件,或者是否有其他插件可以做到这一点？还将非常感谢如何完成它的示例/概述.
推荐指数
解决办法
查看次数
JQuery自动完成调用中的撇号
搜索任何不包含撇号的名称时,以下代码有效.当您尝试在名称中找到带撇号的人时,它会失败(返回错误).我怎样才能找到有撇号的人？
function autoComplete() {
$(document).ready(function () {
$(".AutoCompleteClass").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Service/NomineeWebService.asmx/GetMatchingActiveDirectoryUsers",
data: "{ 'SearchCharacters': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
id: item.NomineeUserName,
value: item.NomineeLastNameFirstName + " - " + item.NomineeDomainAndUserName,
data: item
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
delay: 150,
minLength: 3,
select: function …推荐指数
解决办法
查看次数