使用json ajax javascript jquery和java（无PHP）自动完成搜索栏

I am trying to implement the autocomplete search bar similar to facebook (like the drop down results when clicked on a particular result, it should direct to the respective link).

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

I have got the autocomplete thing working (search results displaying only text) but I am not sure how to link the respective links/urls to the results.

我有自动完成的工作(搜索结果只显示文本),但我不知道如何将相应的链接/网址链接到结果。

Any help is much appreciated. Thank you.

任何帮助深表感谢。谢谢。

Below is my searchjson method for java which I have linked to routes as 'GET' method.

下面是我对java的searchjson方法,我将其作为'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);

Below is my javascript for autocomplete

以下是我的自动填充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);

1 个解决方案

#1

On your autocomplete constructor you can use the option

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

select: function( event, ui ) {}

select:function(event,ui){}

that gets fired when you select an item. So you can then do whatever you like.

选择项目时会被触发。所以你可以做任何你喜欢的事情。

So you talk about redirecting, in that case you can redirect to that page with window.location

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

#1