Jquery mobile 如何使jquery自动完成在最新的免费jqgrid中工作
我尝试在Github中的最新免费jqgrid中使用edittype:custom。 自动完成窗口宽度与列宽相同，在mobile中太小： 如何使autocomplete下拉列表在移动设备中更广泛、更自然 完整的测试用例：Jquery mobile 如何使jquery自动完成在最新的免费jqgrid中工作,jquery-mobile,jqgrid,jquery-autocomplete,free-jqgrid,Jquery Mobile,Jqgrid,Jquery Autocomplete,Free Jqgrid,我尝试在Github中的最新免费jqgrid中使用edittype:custom。 自动完成窗口宽度与列宽相同，在mobile中太小： 如何使autocomplete下拉列表在移动设备中更广泛、更自然 完整的测试用例： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" href="http://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css" type="text/css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
<script>
$(document).bind('mobileinit', function () {
$.mobile.changePage.defaults.changeHash = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script src="http://rawgit.com/commadelimited/autoComplete.js/master/jqm.autoComplete-1.5.2.js"></script>
<script src="http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<script>
$(document).ready(function () {
var mydata = [
{ id: 0, Name: "Indiana", Category: "IN" },
{ id: 1, Name: "California", Category: "CA" },
{ id: 2, Name: "Pennsylvania", Category: "PA" },
{ id: 3, Name: "Texas", Category: "TX" }
];
var lastSel;
var grid = $("#list");
grid.jqGrid({
data: mydata,
datatype: 'local',
colModel: [
{
name: 'Name', editable: true, width: 100,
edittype: 'custom',
editoptions: {
custom_element: function (value, options) {
var elemStr = '<div>', newel, width;
if (options.id === options.name) {
// form edit
elemStr += '<input class="FormElement" size="' +
options.size + '"' + ' id="' + options.id + '"';
}
else { // inline edit
width = getColumnByName(grid, options.name).width - 2;
elemStr += '<input class="FormElement" ' +
' style="width:' + width + 'px" ' + ' id="' + options.id + '_x"';
}
elemStr += ' value="' + value + '"/>';
elemStr += '<ul id="Xsuggestions" data-role="listview" data-inset="true"></ul></div>';
newel = $(elemStr)[0];
setTimeout(function () {
$('#Xsuggestions').listview().listview('refresh');
input_autocomplete(newel, options.id + '_x');
}, 100);
return newel;
},
custom_value: function (elem) {
return elem.find("input").val();
}
}
},
{ name: 'Category', index: 'Category', width: 50, editable: true }
],
sortname: 'Name',
ignoreCase: true,
gridview: true,
viewrecords: true,
rownumbers: true,
height: "100%",
sortorder: "desc",
pager: '#pager',
editurl: 'clientArray',
ondblClickRow: function (id, ri, ci) {
grid.jqGrid('editRow', id, true, null, null, 'clientArray', {});
},
onSelectRow: function (id) {
if (id && id !== lastSel) {
if (typeof lastSel !== "undefined") {
grid.jqGrid('restoreRow', lastSel);
}
lastSel = id;
}
}
});
});
var getColumnByName = function (grid, columnName) {
var cm = grid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length;
for (; i < l; ++i) {
if (cm[i].name === columnName) {
return cm[i];
}
}
return null;
};
function input_autocomplete(newel, id) {
var input = $("input", newel);
//if (input.length === 0) {
// return;
//}
input[0].ischanged = false;
input.autocomplete({
target: $('#Xsuggestions'),
source: autocompleteData,
callback: function (e) {
var $a = $(e.currentTarget);
$('#' + id).val($a.data('autocomplete').label);
$('#' + id).autocomplete('clear');
input[0].ischanged = true;
},
link: '#',
//link: 'target.html?term=',
minLength: 1
});
}
</script>
</head>
<body>
<div data-role="page" id="mainPage">
<table>
<tr>
<td>
<input type="text" id="searchField">
<ul id="suggestions" data-role="listview" data-inset="true"></ul>
</td>
</tr>
</table>
<table id="list"><tbody><tr><td /></tr></tbody></table>
<div id="pager"></div>
</div>
<script>
var autocompleteData = $.parseJSON('[{"value":"AL","label":"Alabama"},{"value":"AK","label":"Alaska"},{"value":"CA","label":"California"},{"value":"CO","label":"Colorado"},{"value":"CT","label":"Connecticut"},{"value":"NC","label":"North Carolina"},{"value":"ND","label":"North Dakota"},{"value":"NI","label":"Northern Marianas Islands"},{"value":"OH","label":"Ohio"},{"value":"OK","label":"Oklahoma"},{"value":"OR","label":"Oregon"},{"value":"PA","label":"Pennsylvania"},{"value":"PR","label":"Puerto Rico"},{"value":"RI","label":"Rhode Island"},{"value":"WV","label":"West Virginia"},{"value":"WI","label":"Wisconsin"},{"value":"WY","label":"Wyoming"}]');
$("#mainPage").bind("pageshow", function (e) {
$("#searchField").autocomplete({
target: $('#suggestions'),
source: autocompleteData,
callback: function (e) {
var $a = $(e.currentTarget);
$('#searchField').val($a.data('autocomplete').label);
$("#searchField").autocomplete('clear');
},
link: 'target.html?term=',
minLength: 1
});
});
</script>
</body>
</html>
$（文档）.bind（'mobileinit'，函数（）{
$.mobile.changePage.defaults.changeHash=false；
$.mobile.hashListengEnabled=false；
$.mobile.pushStateEnabled=false；
});
$（文档）.ready（函数（）{
var mydata=[
{id:0，名称：“印第安纳”，类别：“IN”}，
{id:1，名称：“加利福尼亚”，类别：“CA”}，
{id:2，名称：“宾夕法尼亚”，类别：“PA”}，
{id:3，名称：“德克萨斯州”，类别：“德克萨斯州”}
];
var lastSel；
风险值网格=$（“#列表”）；
grid.jqGrid({
数据：mydata，
数据类型：“本地”，
colModel：[
{
名称：“名称”，可编辑：真，宽度：100，
edittype:'自定义'，
编辑选项：{
自定义元素：函数（值、选项）{
var elemStr=''，newel，宽度；
if（options.id==options.name）{
//表格编辑
elemStr+='您收到错误“自定义值为未定义消息”因为custom\u元素
的代码有很多错误。它包含很多错误。我可以给你写一篇如何修复它的文章，但我不想从jqm.autocomplete-1.5.2.js
开始讨论如何使用autocomplete
。这不是我当前感兴趣的主题。@Oleg custom\u元素和custom\u值代码是创建的基于jquery UI的自动完成和速率控制示例。因此它们应该可以工作。在这种情况下，jqgrid中可能有一些更改导致自定义编辑停止工作。它们无法工作，因为它包含许多错误（未关闭
//表单编辑pat上的
标记，使用
的其他元素的id
，您构建的
将不会放置在HTML页面上，并且保持断开连接，…我可以继续）在一些表的
中使用jqm.autoComplete-1.5.2.js有问题。您应该尝试修改使用代码jqm.autoComplete-1.5.2.js
而不使用jqGrid，但在HTML
的@Oleg.I的
中，修复了问题和更新了问题。这段代码可以改进吗？我不理解这是：在某些表的内部使用jqm.autoComplete-1.5.2.js存在问题
。我在问题代码的内部表中放置了单独的autoComplete。代码也可以在内联编辑中工作。在哪里可以找到有关引用问题的信息？我不使用jqm.autoComplete-1.5.2.js
，也不使用jQuery Mobile。因此我帮不了你。