Вопрос по ajax, jquery – Как использовать комбинированный список автозаполнения jQuery с данными JSON AJAX?

7

Мне нужно сделать следующее, используя выпадающий список.

Select box has a default list of cities which the user can search from. If a user types in text in the input box, I need to make an ajax call to fetch data and display the options to the user. If data was fetched for user's request, those cities should be appended to the options of Select box

С помощьюJQuery автозаполнение Я могу получить данные JSON о пользователе, вводящем строку и отображающем результаты. Тем не менее, я совершенно не знаю, как интегрировать это с помощью выпадающего списка.

Поле со списком использует статический массив данных для поиска и, если я правильно понимаю, использует регулярное выражение для сопоставления значений. Однако, как мне прервать его и использовать вызов ajax для получения данных с сервера и обновления результатов?

Автозаполнение для ввода текстового поля:

$( "#searchDestination" ).autocomplete({
        delay: 500,
        source: function( request, response ) {
            $.ajax({
                url: "/wah/destinationsJson.action",
                dataType: "json",
                data: {
                    term: request.term
                },
                type: "POST",
                success: function(data){
                    if(data.cities.length == 0)
                        return response(["No matching cities found for " + request.term]);
                    response( $.map(data.cities, function(item){
                        return{
                            label: item.name,
                            value: item.name
                        };
                    })
                    );
                }
            });
        },
        minLength: 2

    });
    });
как выглядит ваша автозаполнение исходных данных? ltiong_sh
@ltiong_sh Мой автозаполнение для простого ввода текста отлично работает с JSON. (обновил мой ответ, хотя) brainydexter
Error: User Rate Limit Exceeded ltiong_sh
Полученные результаты должны быть добавлены в набор оригинальных списков параметров. Исходя из пользовательского ввода, должны быть видны только те параметры, которые соответствуют критерию. brainydexter

Ваш Ответ

2   ответа
0

Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

     $( "#combobox1" ).combobox1({
          select: function (event, ui) { 
           var value = ui.item.value;/*Whatever you have chosen of this combo box*/
            $.ajax({
              type: "POST",
              dataType: 'json',
              url: "script.php",
              data: {
                'anything':value
              },
              success: function(res)
              {
                /*replace your next combo with new one*/
                $("select#combobox2").html(res);
              }
          });
        }
    });
   $( "#toggle" ).click(function() {
    $( "#combobox1" ).toggle();
   });

   $( "#combobox2" ).combobox2();

   $( "#toggle" ).click(function() {
    $( "#combobox2" ).toggle();
   });

PHP-файл (основан на Codeigniter):

<?php   
   $data['response'] = 'false';
   $keyword = $_POST['anything'];
   $query4 = $this->db->query("SELECT * FROM table WHERE field='".$keyword."'");
   $data.= "<option></option>";
   if($query4->num_rows() > 0)
   {
       foreach($query5->result_array() as $row)
       {
         $data.= "<option>".$row['something']."</option>";
       }
   }
   echo json_encode($data);
}
?>

Error: User Rate Limit Exceeded

2

Error: User Rate Limit Exceededдругое автозаполнение Плагин, который я использовал.

Error: User Rate Limit Exceededэтот

Если вы хотите загружать данные динамически в текстовом поле, используйте плагин выше. Иначе, если вы хотите использовать поле со списком, просто загрузите данные в ready () и используйте плагин jquery auto complete!

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded brainydexter
Error: User Rate Limit Exceeded brainydexter
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededthis fiddleError: User Rate Limit Exceeded

Похожие вопросы