javascript - jQuery Ajax JSON PHP 自动提示重复数据显示

Question

我有 jQuery PHP Ajax JSON 自动建议。

这是 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);

和 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);
            }
        }
    });
});

问题是，当尝试在文本框中键入文本时，结果会显示，但如果我尝试退格文本或在其中键入内容，它总是显示重复。

我想要的，它会显示不重复的数据。

我尝试使用 $(".suggestionList").html(tr_str); 但它只显示 1 个数据。

Answer 1

在向其添加新行之前删除当前在 $(".suggestionList") 中的内容。

$("#model").keyup(function()
{
    var model = $("#model").val();

    $.ajax(
    {
        url: "getModel",
        type: "POST",
        data:
        {
            model: model
        },
        dataType: "JSON",
        success: function (jsonStr)
        {
            var len = jsonStr.length;

            // empty last result before adding new results
            $(".suggestionList").empty();  

            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);
            }
        }
    });
});