Вопрос по аутокомплит

Тема в разделе "JavaScript", создана пользователем karen12, 17 май 2018.

  1. karen12

    karen12 Постоялец

    Регистр.:
    26 фев 2012
    Сообщения:
    103
    Симпатии:
    2
    Здравствуйте, имеется скрипт autocomplite
    Код:
      <div class="row">
                <div class="alert alert-block alert-success"></div>
            </div>
            <div class="row">
                <form action="index.php" method="post">
                 <div class="well col-md-5">
                            <input id="demo3" type="text"  name="name" class="col-md-12 form-control" placeholder="Search cities..." autocomplete="off" />
                           
                        </div>
                 <p><input type="submit" /></p>
    </form>
            </div>
    
            <script>
                $(function() {
                    function displayResult(item) {
                        $('.alert').show().html('You selected <strong>' + item.value + '</strong>: <strong>' + item.text + '</strong>');
                    }
                 
    
                   
    
                    $('#demo3').typeahead({
                        source: [
                            {id: 1, full_name: 'Toronto', first_two_letters: 'To'},
                            {id: 2, full_name: 'Montreal', first_two_letters: 'Mo'},
                            {id: 3, full_name: 'New York', first_two_letters: 'Ne'},
                            {id: 4, full_name: 'Buffalo', first_two_letters: 'Bu'},
                            {id: 5, full_name: 'Boston', first_two_letters: 'Bo'},
                            {id: 6, full_name: 'Columbus', first_two_letters: 'Co'},
                            {id: 7, full_name: 'Dallas', first_two_letters: 'Da'},
                            {id: 8, full_name: 'Vancouver', first_two_letters: 'Va'},
                            {id: 9, full_name: 'Seattle', first_two_letters: 'Se'},
                            {id: 10, full_name: 'Los Angeles', first_two_letters: 'Lo'}
                        ],
                        displayField: 'full_name',
                        onSelect: displayResult
                    });
       
                });
            </script>
            </div>
    Этот скрипт выводит в инпут с ID demo3 данные из списка, нужно сделать еще два скрытых инпутов, которые отправили бы POST и id и first_two_letters значения из списка.
     
  2. Anry Le France

    Anry Le France Писатель

    Регистр.:
    16 май 2018
    Сообщения:
    9
    Симпатии:
    1
    В чём прикол делать какие-то инпуты?

    Допили просто функцию displayResult ну или сделай новую и экзекьють, по типу:

    Код:
    <div class="row">
                <div class="alert alert-block alert-success"></div>
            </div>
            <div class="row">
                <form action="index.php" method="post">
                 <div class="well col-md-5">
                            <input id="demo3" type="text"  name="name" class="col-md-12 form-control" placeholder="Search cities..." autocomplete="off" />
                           
                        </div>
                 <p><input type="submit" /></p>
    </form>
            </div>
    
            <script>
                $(function() {
                    function displayResult(item) {
                        $('.alert').show().html('You selected <strong>' + item.value + '</strong>: <strong>' + item.text + '</strong>');
                        postResult(item);
                    }
                 
                   function postResult(item) {
                        $.ajax({ type: 'POST', url: 'полный_или_локальный_путь_сюда', data: { id: item.id, first_two_letters: item.first_two_letters }, success: postCallback });
                   }
    
                   function postCallback(data) {
                        console.log(data);
                   }
    
                    $('#demo3').typeahead({
                        source: [
                            {id: 1, full_name: 'Toronto', first_two_letters: 'To'},
                            {id: 2, full_name: 'Montreal', first_two_letters: 'Mo'},
                            {id: 3, full_name: 'New York', first_two_letters: 'Ne'},
                            {id: 4, full_name: 'Buffalo', first_two_letters: 'Bu'},
                            {id: 5, full_name: 'Boston', first_two_letters: 'Bo'},
                            {id: 6, full_name: 'Columbus', first_two_letters: 'Co'},
                            {id: 7, full_name: 'Dallas', first_two_letters: 'Da'},
                            {id: 8, full_name: 'Vancouver', first_two_letters: 'Va'},
                            {id: 9, full_name: 'Seattle', first_two_letters: 'Se'},
                            {id: 10, full_name: 'Los Angeles', first_two_letters: 'Lo'}
                        ],
                        displayField: 'full_name',
                        onSelect: displayResult
                    });
       
                });
            </script>
            </div>
     
  3. karen12

    karen12 Постоялец

    Регистр.:
    26 фев 2012
    Сообщения:
    103
    Симпатии:
    2
    А как изменить код, чтобы при нажатии на кнопку "submit" данные передались на сервер, и как вывести в серевере данные POST ? Вот так ? $id = $_POST['id']; <?= $id?> ??
     
  4. yurso

    yurso Создатель

    Регистр.:
    22 мар 2018
    Сообщения:
    7
    Симпатии:
    1
    Код:
    <div class="row">
                <div class="alert alert-block alert-success"></div>
            </div>
            <div class="row">
                <form action="index.php" method="post">
                 <div class="well col-md-5">
                            <input id="demo3" type="text"  name="name" class="col-md-12 form-control" placeholder="Search cities..." autocomplete="off" />
                           <input type="hidden" id="demo3-id" name="id">
                           <input type="hidden" id="demo3-first_two_letters" name="first_two_letters">
                        </div>
                 <p><input type="submit" /></p>
    </form>
            </div>
    
            <script>
                $(function() {
                    function displayResult(item) {
                        $('.alert').show().html('You selected <strong>' + item.value + '</strong>: <strong>' + item.text + '</strong>');
                        $('#demo3-id').val(item.id);
                        $('#demo3-first_two_letters').val(item.first_two_letters);
                    }
                
    
                  
    
                    $('#demo3').typeahead({
                        source: [
                            {id: 1, full_name: 'Toronto', first_two_letters: 'To'},
                            {id: 2, full_name: 'Montreal', first_two_letters: 'Mo'},
                            {id: 3, full_name: 'New York', first_two_letters: 'Ne'},
                            {id: 4, full_name: 'Buffalo', first_two_letters: 'Bu'},
                            {id: 5, full_name: 'Boston', first_two_letters: 'Bo'},
                            {id: 6, full_name: 'Columbus', first_two_letters: 'Co'},
                            {id: 7, full_name: 'Dallas', first_two_letters: 'Da'},
                            {id: 8, full_name: 'Vancouver', first_two_letters: 'Va'},
                            {id: 9, full_name: 'Seattle', first_two_letters: 'Se'},
                            {id: 10, full_name: 'Los Angeles', first_two_letters: 'Lo'}
                        ],
                        displayField: 'full_name',
                        onSelect: displayResult
                    });
      
                });
            </script>
            </div>
    Это можно сделать так. И данные передадутся на сервер.

    А вывести можно так как написали выше.
     
    Последнее редактирование модератором: 30 май 2018