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

K

karen12

Постоялец
Регистрация
26 Фев 2012
Сообщения
109
Реакции
4
Здравствуйте, имеется скрипт 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 значения из списка.
 
В чём прикол делать какие-то инпуты?

Допили просто функцию 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>
 
Anry Le France написал(а):
В чём прикол делать какие-то инпуты?

Допили просто функцию 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>
Нажмите для раскрытия...
А как изменить код, чтобы при нажатии на кнопку "submit" данные передались на сервер, и как вывести в серевере данные POST ? Вот так ? $id = $_POST['id']; <?= $id?> ??
 
Код: 
<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>

Это можно сделать так. И данные передадутся на сервер.

А вывести можно так как написали выше.
 
Последнее редактирование модератором:
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху