Используйте javascript для отображения данных из sql в том виде, в котором они набраны в HTML-форме

Если вы хотите, чтобы пользователь записал ввод:

Первое, что нужно сделать, это записать в select все значения vin и сохранить их в качестве входных данных для HTML-тега data-list.

Затем вы можете использовать приведенный ниже код (вместо тега ввода, который вы используете сейчас):

<input list = "vinData" name = "vinValue" required>
  <datalist id = "vinData">
    <option value = "89841321">
    <option value = "546123">
    <option value = "213134984">
  </datalist>

Вы должны сделать option, используя PHP с циклом

Или вы можете просто использовать тег html select. Таким образом, пользователь не может ничего писать и должен выбрать один из вариантов.

<select>
  <option value = "89841321">89841321</option>
  <option value = "546123">546123</option>
  <option value = "213134984">213134984</option>
</select>

Вам нужно выполнить запрос ajax при событии размытия винно.

$('body').on('.vin-no','blur', function(){
   $.ajax({
        type:'post',
        dataType:'json',
        url: 'server.php',
        data: {vinno: $(this).val()}
        success: function(response){
            $('.model-group').val(response.modelgroup);
            $('.model-variant').val(response.modelvariant);
        }
   });
})

Также, как сказал @ali, это должен быть список выбора, чтобы пользователь мог выбрать одно из существующих значений. Если вы используете 'select', вы можете сделать событие 'blur' событием 'change'. Я использовал вызовы jquery ajax, и запрос ajax должен выполняться на стороне сервера.

Как написал @RobertFrenette (и если я не понимаю, чего вы пытаетесь достичь), для этого потребуется несколько сценариев связи между передним HTML - через AJAX в PHP - от PHP до SQL - и все обратно в пользовательскую HTML-форму. Попробуйте этот подход

1 Вызов ajax для отправки пользовательского ввода (номер vin)

HTML код:

<input type = "text" id = "vin-input">
<input type = "text" id = "model-group" disabled>
<input type = "text" id = "model-varient" disabled>


enter code here

Код Javascript (с jQuery):

//When only user change VIN number call this function.
$("#vin-input").keyup(function( event ){
  var input = $(this).val();

  //Regex validate to prevent AJAX request when not needed.
  //@todo change regex to your VIN schema.
  var properInput = new RegExp('^[0-9]{6,}$');
  if (properInput.test(input)) {
            
    //@todo remove this
    alert(input + " ok - send ajax");
    //Send AJAX to PHP script.
    //@todo change "get-vin.php" to your PHP script name.
    $.post( "get-vin-data.php", {"vin": input})
      .done( function( data ) {
        //Handle data returning from PHP script.
        //@todo parse returning data and put it into form.
        $( "#model-group" ).val( "model 45" );
        $( "#model-varient" ).val( "varient 45" );
      })
      .fail(function() {
        //Handle failure of AJAX call (here it will always fail).
        $( "#model-group" ).val( "model 45" );
        $( "#model-varient" ).val( "varient 45" );
      });
  }
})

Вы можете увидеть соответствие регулярных выражений, так как вам следует попытаться повысить производительность и проверить номер vin, чтобы вызывать AJAX только тогда, когда это необходимо. Вы должны изменить регулярное выражение, чтобы соответствовать вашей схеме VIN.

Скрипка переднего конца

2 Получите данные в бэкэнде и вернитесь к своему скрипту

Эту часть я должен оставить вам. Ты должен:

• create script (в моем примере он называется get-vin-data.php, но вы можете называть его как хотите и с любой используемой вами технологией.
• Он должен возвращать информацию в ваш пользовательский скрипт - как можно меньше и проще, например. JSON {model-group: "group 32", model-varient: "reddish"}.
• Добавьте эти данные в соответствующие входные данные в HTML - в примере JS это часть кода //@todo parse returning data and put it into form..

Удачи.