Как передать больше данных autocomplete ajax

Question

Я использую jQueryUI autocomplete.

Это мои данные продукта с его деталью соответствующей марки (отношения Laravel/SQL Join)

[ 
    { 
    "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 
    } 
    } 
] 

Это Аякс часть автозаполнения опций(). Я хотел, чтобы заполнил ввод маркой, а затем название продукта.

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 так что я могу добавить его в атрибуте данных на моем входе? Я динамически добавил входные данные, и я хочу проверить идентификатор продукта на бэкэнд перед отправкой в ​​базу данных, а не проверять входное значение.

Выходной ток входного

<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"> 

Answer 1

Вы можете принимать различные значения «значение» и ключ «этикетка», а затем присвоить значение во время выбора события.

Пример:

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 

    } 

Answer 2

Я заканчивал тем, что с таким подходом. Кажется, что вы должны указать не менее либо ярлык, либо значение. Таким образом, пока вы установите один из них, вы можете добавить в массив дополнительные необходимые элементы.

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