0
這是jQuery的自動完成功能在同一個表使用多個輸入值相同提醒錯誤。當我在商品代碼中選擇1000時，它將幫助我自動完成商品描述，商品價格。
但是，當我添加第二項時，它允許用戶輸入與前面相同的商品代碼。當用戶輸入與以前的產品代碼相同的產品代碼時，如何提示錯誤。
我嘗試了很多方法，但仍然無法工作。任何人都知道，請幫助我。謝謝！以下是源代碼。
$(document).ready(function(){
// Use the .autocomplete() method to compile the list based on input from user
$('#itemCode').autocomplete({
source: 'data/item-data.php',
minLength: 1,
select: function(event, ui) {
var $itemrow = $(this).closest('tr');
// Populate the input fields from the returned values
$itemrow.find('#itemCode').val(ui.item.itemCode);
$itemrow.find('#itemDesc').val(ui.item.itemDesc);
$itemrow.find('#itemPrice').val(ui.item.itemPrice);
// Give focus to the next input field to recieve input from user
$('#itemQty').focus();
return false;
\t }
// Format the list menu output of the autocomplete
}).data("autocomplete")._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.itemCode + " - " + item.itemDesc + "</a>")
.appendTo(ul);
};
// Get the table object to use for adding a row at the end of the table
var $itemsTable = $('#itemsTable');
// Create an Array to for the table row. ** Just to make things a bit easier to read.
var rowTemp = [
'<tr class="item-row">',
'<td><a id="deleteRow"><img src="images/icon-minus.png" alt="Remove Item" title="Remove Item"></a></td>',
'<td><input name="itemCode[]" class="tInput" value="" id="itemCode" /> </td>',
'<td><input name="itemDesc[]" class="tInput" value="" id="itemDesc" readonly="readonly" /></td>',
'<td><input name="itemQty[]" class="tInput" value="" id="itemQty" /></td>',
'<td><input name="itemPrice[]" class="tInput" value="" id="itemPrice" /></td>',
'</tr>'
].join('');
// Add row to list and allow user to use autocomplete to find items.
$("#addRow").bind('click',function(){
var $row = $(rowTemp);
// save reference to inputs within row
var $itemCode \t = $row.find('#itemCode');
var $itemDesc \t = $row.find('#itemDesc');
var $itemPrice \t = $row.find('#itemPrice');
var $itemQty \t = $row.find('#itemQty');
if ($('#itemCode:last').val() !== '') {
// apply autocomplete widget to newly created row
$row.find('#itemCode').autocomplete({
source: 'data/item-data.php',
minLength: 1,
select: function(event, ui) {
$itemCode.val(ui.item.itemCode);
$itemDesc.val(ui.item.itemDesc);
$itemPrice.val(ui.item.itemPrice);
// Give focus to the next input field to recieve input from user
$itemQty.focus();
return false;
}
}).data("autocomplete")._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.itemCode + " - " + item.itemDesc + "</a>")
.appendTo(ul);
};
// Add row after the first row in table
$('.item-row:last', $itemsTable).after($row);
$($itemCode).focus();
} // End if last itemCode input is empty
return false;
});
$('#itemCode').focus(function(){
window.onbeforeunload = function(){ return "You haven't saved your data. Are you sure you want to leave this page without saving first?"; };
});
}); // End DOM
\t // Remove row when clicked
\t $("#deleteRow").live('click',function(){
\t \t $(this).parents('.item-row').remove();
// Hide delete Icon if we only have one row in the list.
if ($(".item-row").length < 2) $("#deleteRow").hide();
\t });<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery AutoComplete tutorial using multiple input boxes</title>
<style type="text/css" title="currentStyle">
@import "css/layout-styles.css";
@import "css/themes/smoothness/jquery-ui-1.8.4.custom.css";
</style>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- jQuery libs -->
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<!-- Our jQuery Script to make everything work -->
<script type="text/javascript" src="js/jq-ac-script.js"></script>
</head>
<body>
<div id="container">
<div class="panel">
<div class="title-large">
<div class="theme"></div>
</div>
<div class="content inpad">
<div id="messageBox" style="margin-left:15px; padding-left:20px; padding-bottom:5px; border:1px #ccc solid; display:none;"></div>
<form action="" id="itemsForm">
<table id="itemsTable" class="general-table">
<thead>
<tr>
<th></th>
<th>Item Code</th>
<th>Item Description</th>
<th>Item Qty</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr class="item-row">
<td></td>
<td><input name="itemCode[]" value="" class="tInput" id="itemCode" tabindex="1"/> </td>
<td><input name="itemDesc[]" value="" class="tInput" id="itemDesc" readonly="readonly" /></td>
<td><input name="itemQty[]" value="" class="tInput" id="itemQty" tabindex="2"/></td>
<td><input name="itemPrice[]" value="" class="tInput" id="itemPrice" readonly /> </td>
</tr>
</tbody>
</table>
</form>
<a href="#" id="addRow" class="button-clean large"><span> <img src="images/icon-plus.png" alt="Add" title="Add Row" /> Add Item</span>sadsada</a>
</div>
</div>
</div>
</body>
</html><?php
/* Database setup information */
$dbhost = 'localhost'; // Database Host
$dbuser = 'root'; // Database Username
$dbpass = ''; // Database Password
$dbname = 'itemsdb'; // Database Name
/* Connect to the database and select database */
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die(mysql_error());
mysql_select_db($dbname);
$return_arr = array();
$param = $_GET["term"];
$fetch = mysql_query("SELECT * FROM items WHERE itemCode REGEXP '^$param' LIMIT 5");
/* Retrieve and store in array the results of the query.*/
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['itemCode'] = $row['itemCode'];
$row_array['itemDesc'] = $row['itemDesc'];
$row_array['itemPrice'] = $row['itemPrice'];
array_push($return_arr, $row_array);
}
/* Free connection resources. */
mysql_close($conn);
/* Toss back results as json encoded array. */
echo json_encode($return_arr);
我一直在使用$（ '輸入'）模糊（函數（）例：jsfiddle這種方法，但在如果函數總是不能達到條件請人幫助我，如果你知道它。感謝
你能提供數據/項，data.php的值或創建一個小提琴複製的問題？ – Deep
http://www.codemashups.com/source/jquery/jquery-autocomplete-p1/這是源代碼的演示。 – eric
數據的價值和完整的源代碼可以從https://www.freshdesignweb.com/jquery-ajax-autocomplete-plugins/下載，並找到jQuery的自動完成使用多個輸入在同一表 – eric