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

我需要使用组合框执行以下操作。如何使用带有AJAX JSON数据的jQuery自动完成组合框？

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 

    }); 
    });

来源

2012-05-29 brainydexter

你的自动完成源数据是什么样的？ –

@ltiong_sh简单输入文本框的我的自动完成功能可以很好地使用JSON。（虽然更新我的答案） – brainydexter

当你说取回列表应该被追加到默认列表，这是否意味着默认项目将永远visibile，或将他们过滤以及..基于用户输入？ –

这可能会帮助你.. another autocomplete插件，我使用。

又读this

如果你想在文本字段中动态加载数据，上面的插件去。否则，如果你想使用组合框，然后加载数据就绪（）并使用jquery自动完成插件！

来源

2012-05-29 09:58:23 Jebin

我希望能够扩展/重用jQuery网站上的组合框。另外，由于相当多的数据，因此无法加载所有onReady数据。需要根据输入文本框中指定的前缀进行前缀搜索。 – brainydexter

为什么它必须是组合框，为什么不是文本字段？ – Jebin

我的要求是，我需要一个基于前缀匹配的自动完成功能的文本框和一个产生所有选项的组合框。 – brainydexter

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

然后：

 $("#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文件（这是基于笨）：

<?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); 
} 
?>

希望这有助于。

来源

2014-02-08 23:24:45 Dharmesh

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

回答

相关问题