使用 json ajax javascript jquery 和 java 的自动完成搜索栏(无 PHP)

Autocomplete search bar using json ajax javascript jquery and java (no PHP)

本文关键字:搜索栏 PHP javascript ajax json jquery java 使用      更新时间:2023-09-26

我正在尝试实现类似于Facebook的自动完成搜索栏(就像点击特定结果时的下拉结果一样,它应该指向相应的链接)。

我已经让自动完成功能正常工作(搜索结果仅显示文本),但我不确定如何将相应的链接/URL 链接到结果。

任何帮助都非常感谢。谢谢。

下面是我的 java 搜索json 方法,我已将其链接到路由作为"GET"方法。

public static Result searchJSON(String query) {
    List<Account> userAccs = searchAccounts(query);
    ObjectNode json = Json.newObject();
    ArrayNode jsonArray = json.putArray("");
    ObjectNode node = null;
    for(Account acc : userAccs) {
        node = jsonArray.addObject();
        node.put("label", acc.getDisplayName());
        node.put("id", acc.getId());
    }
    return ok(jsonArray);

下面是我用于自动完成的 JavaScript

var SearchBar = (function($) {
var search_data = function( request, response ) {
    $.ajax({
        url: "/search.json",
        dataType: "json",
        type: "GET",            
        data: {q: request.term },
        success: function( data ) {
            response( $.map( data, function( item ) {
                return {
                    label: item.label,
                    id: item.id
                  };
               }));
           }
       });
    };
    $("#searchfield").autocomplete({
        source: search_data,
        minLength: 1
     }); 
  return {
      attach: attach_to_bar
  };
}) (jQuery);

在自动完成构造函数上,您可以使用该选项

select: function( event, ui ) {}

当您选择一个项目时,它会触发。这样你就可以做任何你喜欢的事情。

所以你谈论重定向,在这种情况下,你可以使用window.location重定向到该页面