【发布时间】：2014-08-26 04:56:17
【问题描述】：
我有两个单独工作的函数。第一个使用 Bootstrap 的 typeahead 功能。第二个允许在不进行提交或页面刷新的情况下编辑 HTML 表格单元格。我想要做的是结合两者而不为它编写一个全新的函数。例如：当用户双击表格单元格时，我希望启用预先输入的文本框，以便在他开始输入条目时，有效的条目开始显示在下面的菜单中。一旦用户做出选择，当焦点丢失时，底层数据库表将照常更新。
我想我可以像这样向“可编辑”添加一个事件：
cell.on('keydown', function() {$(".autofill").typeahead();});
但是没有运气:-(。有什么建议吗？下面是这两个函数的代码.... 顺便说一句，我使用的是 Bootstrap 版本 2.1.1 和 Jquery 1.8.3
$(document).ready(function(){
/************************************************************
USING BOOTSTRAP'S TYPEAHEAD
************************************************************/
$('.autofill').typeahead({
source: function (query, process) {
query = $(".autofill").val();
link = 'ajax/gdata.aspx';
sp = $(".autofill").attr("proc");
src = $(".autofill").attr("src");
if(!src) src = "No Source";
$.get(link, {desc:query}, function(data) {
var x = $.parseJSON(data);
codes = [];
map = {};
$.each(x, function(i, cd) {
map[cd.code_desc] = cd;
codes.push(cd.code_desc);
process(codes);
});
});
},
matcher: function(item) {
if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
return true;
}
},
sorter: function(items) {
return items.sort();
},
highlighter: function(item) {
var regex = new RegExp( '(' + this.query + ')', 'gi' );
return item.replace( regex, "<b>$1</b>" );
},
updater: function(item) {
d = $(".autofill").attr("show");
selectedItem = map[item].code;
if (d == 0) {
return selectedItem; //return code
} else {
return item; //return description
}
}
});
/************************************************************
Edit underlying table's column directly from HTML table.
An editable field is highlighted in yellow
************************************************************/
$(".editable").dblclick(function() {
var a = $.url().param("type");
var b = $.url().param("id");
var c = $.url().param("grpid");
var d = $("input[name='step']").val();
var e = $(this).attr("data-cap");
var f = $(this).attr("data-ihtml");
var m = "table";
var warn = "#warn" + d;
var id = $(this).attr("data-id");
var type = $(this).attr("data-rec");
var db = "MyDB";
var tab = a + b + '_' + type;
var column = $(this).attr("data-col");
var idcol = $(this).attr("data-idcol");
var idcolval = $(this).attr("data-idcolval");
var cell = $(this);
var cellWidth = cell.attr("width");
var prevContent = cell.text();
var URL = "ajax/p.aspx";
var et = $(this).attr("entry-type");
var s = $(this).attr("show");
var src = $(this).attr("src");
if(!src) {
src = '""';
}
if(!s) {
s = "1";
}
if(!e) {
e = "Y";
}
if(!et) {
et = "";
}
if(!f) {
if(et == "") var f = '<input type="text" name="newValue" size="4" value="' + prevContent + '" id="txt' + id + '" />';
if(et == "autofill") var f = '<input type="text" data-provide="typeahead" class="autofill" autocomplete="off" proc="1" show="' + s + '" name="newValue" size="4" value="' + prevContent + '" id="txt' + id + '" />';
}
var form = '<form action = "javascript: this.preventDefault">' + f + '</form>';
var msg = "Changes will take effect immediately after moving off this cell!";
$(warn).html('');
$(warn).append('<div class="alert alert-warning">' + msg + '</div>');
cell.html(form).find('input[type=text]').focus().select().attr('width', cellWidth);
cell.on('click', function() {return false;});
cell.focusout(function() {
var newContent = $("#txt" + id).val();
var newVal = newContent;
var g = f.slice(f.search("select"), 7);
if (g == "select") {
var h = "#txt" + id + " option:selected";
newContent = $(h).text();
}
if (newContent == "") {
cell.text(prevContent);
return false;
}
if (newContent == prevContent) {
cell.text(prevContent);
return false;
}
if (e == "Y") {
newVal = newVal.toUpperCase();
newContent = newContent.toUpperCase();
}
var formData = 'type=' + a + '&id=' + b + '&grpid=' + c + '&modal=' + m + '&db=' + db + '&tab=' + tab + '&col=' + column + '&val=' + newVal + '&idcol=' + idcol + '&idcolval=' + idcolval + '&orig=' + prevContent + '&cap=' + e;
$.ajax({
url : URL,
type : "POST",
data : formData,
dataType : "html"
})
.done(function(msg) {
//console.log(msg);
if(!msg) {
$(warn).html('');
$(warn).append('<div class="alert alert-success">' + "Record successfully updated!" + '</div>');
//location.reload(true);
cell.text(newContent);
} else {
$(warn).html('');
$(warn).append('<div class="alert alert-error">' + msg + '</div>');
cell.text(prevContent);
}
});
});
});
});
【问题讨论】：
-
您是指 Bootstrap v2 的 typeahead 小部件，还是 Twitter 的 Typeahead.js 小部件？
-
Bootstrap v2 的小部件，而不是与 Bootstrap v3 一起使用的 Twitter 的 Typeahead.js ....
标签： jquery twitter-bootstrap autofill typeahead