I have jQuery PHP Ajax JSON auto-suggest.
This is the HTML:
<input type="text" id="model"/>
<ul class="suggestionList"></ul>
PHP
$model = $_POST['model'];
$getModel = array();
$qData = oci_parse($c1, "
SELECT
M.INVENTORY_ITEM_ID,
M.SEGMENT1,
M.DESCRIPTION,
M.ITEM_TYPE,
M.INVENTORY_ITEM_STATUS_CODE,
C.INVENTORY_ITEM_ID,
C.CATEGORY_SET_ID,
C.CATEGORY_ID,
K.CATEGORY_ID,
K.CONCATENATED_SEGMENTS
FROM
MTL_SYSTEM_ITEMS M,
MTL_ITEM_CATEGORIES C,
MTL_CATEGORIES_B_KFV K
WHERE
M.INVENTORY_ITEM_ID = C.INVENTORY_ITEM_ID AND
K.CATEGORY_ID = C.CATEGORY_ID AND
C.CATEGORY_SET_ID = 1 AND
M.ITEM_TYPE IN ('FG', 'SA') AND
M.INVENTORY_ITEM_STATUS_CODE = 'Active' AND
K.CONCATENATED_SEGMENTS LIKE 'WH2-LEG-DIR' AND
M.SEGMENT1 LIKE '%$model%' AND
ROWNUM <= 10
");
oci_execute($qData);
while($dData = oci_fetch_array($qData))
{
$getModel[] = array(
"modelName" => $dData['SEGMENT1'],
"inventoryItemID" => $dData['INVENTORY_ITEM_ID']
);
}
echo json_encode($getModel);
and the JS
$("#model").keyup(function()
{
var model = $("#model").val();
$.ajax(
{
url: "getModel",
type: "POST",
data:
{
model: model
},
dataType: "JSON",
success: function (jsonStr)
{
var len = jsonStr.length;
for(var i=0; i<len; i++)
{
var modelName = jsonStr[i].modelName;
var inventoryItemID = jsonStr[i].inventoryItemID;
var tr_str = "<li id='"+jsonStr[i].inventoryItemID+"'>" +
modelName+
"</li>";
$(".suggestionList").append(tr_str);
}
}
});
});
The problem is, when trying to type text into textbox the result is show but it always show duplicate if I try to backspace the text or type something there.
What I want, it will show the data not in duplicate.
I tried using $(".suggestionList").html(tr_str); but it only show 1 data.
$(".suggestionList")before adding the new lines to it$(".suggestionList").empty()