如何通過更多數據自動完成ajax

我正在使用jQueryUI autocomplete。如何通過更多數據自動完成ajax

這是我與各自的品牌信息產品（Laravel關係/ SQL連接）的數據

[ 
    { 
    "id": 2, <--------- product.id 
    "name": "iphone", <--------- product.name 
    "created_at": "2017-02-08 06:12:34", 
    "updated_at": "2017-02-08 06:12:34", 
    "user_id": 1, 
    "brand_id": 1, 
    "ms_url": "google.com", 
    "gravity": 1.03, 
    "example_id": null, 
    "relevance": 210, 
    "brand": { 
     "id": 1, 
     "name": "apple",<--------- product.brand.name 
     "created_at": "2017-02-08 03:00:49", 
     "updated_at": "2017-02-08 03:00:49", 
     "user_id": 1, 
     "abbreviation": "AP", 
     "visible": 1 
    } 
    } 
]

這是（）選項自動完成ajax的一部分。我想它用品牌填寫輸入，然後填寫產品名稱。

source: function(request, response) { 
    $.ajax({ 
     type: "GET", 
     url: "/find", 
     dataType: "json", 
     data: { 
     term: request.term 
     }, 
     error: function(xhr, textStatus, errorThrown) { 
     alert('Error: ' + xhr.responseText); 
     }, 
     success: function(data) { 
     console.log('data: ' + data.brand.name + ' - ' + data.name); 
     //Outputs: apple - iphone 
     response($.map(data, function(product) { 
      return { 
      label: product.brand.name + " " + product.name, 
      value: product.brand.name + " - " + product.name 
      }; 
     })) 
     } 
    }); 
    }, 
    select: function(event, ui) { 
    console.log(ui); 
    //only conains product.brand.name & product.name, I need product.id 

    // $(this).data('prod-id', ui.id); 

    }

問題：我如何也通過product.id這樣我就可以把它添加到我的輸入數據屬性？我已經動態地添加了輸入，並且希望在提交到數據庫之前檢查後端的產品ID，而不是檢查輸入值。

電流輸入

<input type="text" class="ui-autocomplete-input" data-prod-id="" value="apple - iphone">

輸入

<input type="text" class="ui-autocomplete-input" data-prod-id="2" value="apple - iphone">

來源

2017-02-18 ProEvilz

的期望輸出的輸出可以採取「價值」和「標籤」鍵不同的值，那麼在選擇活動的時間分配值。

例子：

source: function(request, response) { 
    $.ajax({ 
     type: "GET", 
     url: "/find", 
     dataType: "json", 
     data: { 
     term: request.term 
     }, 
     error: function(xhr, textStatus, errorThrown) { 
     alert('Error: ' + xhr.responseText); 
     }, 
     success: function(data) { 
     console.log('data: ' + data.brand.name + ' - ' + data.name); 
     //Outputs: apple - iphone 
     response($.map(data, function(product) { 
      return { 
      label: product.brand.name + " - " + product.name, 
      value: product.id //<---------- assign product id 
      }; 
     })) 
     } 
    }); 
    }, 
    select: function(event, ui) { 
    $(this).val(ui.item.label); //<----------- assign value of lable 

    $(this).attr('data-prod-id', ui.item.value); //<------data-prod-id 
    return false; //<------------ to prevent from assign original value 

    }

來源

2017-02-18 05:44:32

我結束了這種方法去。看起來你必須指定至少或一個標籤或一個值。所以只要你設置其中一個，你可以在數組中添加額外的必要項目。

response($.map(data, function(product) { 
    return { 
    id: product.id, 
    title: product.brand.name + " - " + product.name, 
    value: product.brand.name + " " + product.name 
    }; 
}))

來源

2017-02-18 05:48:02 ProEvilz

如何通過更多數據自動完成ajax

回答

相關問題