1

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.

1
  • 1
    Remove what is currently in $(".suggestionList") before adding the new lines to it $(".suggestionList").empty() Commented Mar 23, 2017 at 1:51

1 Answer 1

2

Remove what is currently in $(".suggestionList") before adding the new lines to it.

$("#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);
            }
        }
    });
});
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.