每当添加新行时,动态行就会变得越来越大。在将typeahed函数包含在动态行中之后,每次添加新行时,新行的大小都是以前的两倍。如果我删除createTypeahead($('#R'+ rowIdx +'input.typeahead'));从代码中,行将恢复为正常大小,但是,提前输入将停止工作。
var skus = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
//prefetch: '../data/films/post_1960.json',
remote: {
url: 'http://localhost:3000/user/search?key=%QUERY',
wildcard: '%QUERY'
}
});
$(document).ready(function () {
function createTypeahead($els) {
$els.typeahead(
{hint: true,
highlight: false,
minLength: 1
},
{
name: 'sku',
//remote: 'http://localhost:3000/user/search?key=%QUERY',
source: skus,
limit: 10
});
}
//for the already present elements
createTypeahead($('input.typeahead'));
// Denotes total number of rows
var rowIdx = 0;
// jQuery button click event to add a row
$('#addBtn').on('click', function () {
// Adding a row inside the tbody.
$('#tbody').append(`<tr id="R${++rowIdx}">
<td class="row-index text-center">
<td></td>
<td><input class="typeahead tt-query" spellcheck="false" autocomplete="off" name="sku" type="text" placeholder="type Sku"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="text-center">
<button class="btn btn-danger remove"
type="button">Remove</button>
</td>
</tr>`);
createTypeahead($('#R'+rowIdx+'input.typeahead'));
});
编辑:添加更多代码
//Extract the keyword.
//Return the result depending on the keyword.
router.get('/search', function(req,res){
//call MySQL Query. and //extract key using req.query.key
db.query('SELECT sku FROM item_new WHERE sku like "%'+req.query.key+'%"',
function(err, rows, fields) {
if (err) throw err;
var data=[];
for(i=0;i<rows.length;i++){
data.push(rows[i].sku);
}
//form JSON response and return.
res.end(JSON.stringify(data));
});
});