如何使用带有 AJAX JSON 数据的 jQuery 自动完成组合框？答案

【问题标题】：How to use a jQuery autocomplete combobox with AJAX JSON data?如何使用带有 AJAX JSON 数据的 jQuery 自动完成组合框？
【发布时间】：2012-06-03 12:21:54
【问题描述】：

我需要使用组合框执行以下操作。

Select box 有一个用户可以搜索的默认城市列表。
如果用户在input 框中输入文本，我需要调用ajax 来获取数据并向用户显示选项。
如果根据用户请求获取数据，则应将这些城市附加到Select box 的选项中

使用jQuery autocomplete 我可以在用户输入字符串并显示结果时获取 json 数据。但是，我对如何使用组合框集成它一无所知。

Combobox 使用静态数据数组进行搜索，如果我理解正确，则使用正则表达式来匹配值。但是，如何中断它并使用 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 我的简单输入文本框的自动完成功能适用于 JSON。（虽然更新了我的答案）
当您说获取的列表应该附加到默认列表时，这是否意味着默认项目将始终可见，或者它们也会被过滤......基于用户输入？
获取的结果应该附加到原始选项列表中。根据用户输入，只有符合条件的选项才可见。

标签： ajax jquery autocomplete combobox

【解决方案1】：

这可能会对你有所帮助.. another autocomplete 我使用的插件。

另请阅读this

如果您想在文本字段中动态加载数据，请使用上述插件。否则，如果您想使用组合框，则只需在 ready() 上加载数据并使用 jquery 自动完成插件！

【讨论】：

我希望扩展/重用 jquery 站点本身的组合框。此外，由于数据量很大，因此无法加载所有数据 onReady。需要根据输入文本框中指定的前缀进行前缀搜索。
为什么一定是组合框而不是文本字段？
我的要求是，我既需要一个文本字段，它就像基于前缀匹配的自动完成功能，又需要一个产生所有选项的组合框。
争议！！然后您需要自定义插件并找到一种方法可以根据每个请求更新组合框中的选项。让我试一试。
转到this fiddle 并检查。我认为，您可以使用自己的 jquery ajax 更新“availableTags”变量。试一试。

【解决方案2】：

为什么不复制插件和两个组合框。

然后：

     $( "#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);
}
?>

希望这会有所帮助。

【讨论】：