4

我正在就在进行中的项目中开发新功能的方向提出一些建议。我被要求建立一个新的搜索，以像 hipmunk 或 kayak 上的酒店搜索结果一样 - 我以小块的形式加载数据，例如每次调用 10 个酒店并在数据进入时重新排序。

该网站是用 Laravel 4 编写的，旧的搜索使用基本搜索，通过无限滚动进行分页。有人提到在 AngularJS 之类的 javascript 框架中构建这个功能会更容易，虽然这个网站已经建成，但如果有好处我会考虑重写。

目前，该项目建立了一个后端团队，他们为我们提供了数据 API，最初我们考虑使用 AngularJS，但数据通常需要编辑才能有用。另一种选择可能是使用当前的 Laravel 站点并将其转换为为 JavaScript 框架准备的中间 API。

我不确定要采取什么方向。编写我自己的自定义 jquery 插件来处理它并保留当前站点，或者使用 AngularJS。我真的很感激任何建议

我找到了一个有用的插件，可能对我有很大帮助：http: //mixitup.io/

下面是 hipmunk 搜索的示例，您可以看到他们有不同的酒店。我一个接一个地截取了这些屏幕截图。我正在尝试重新创建这样的搜索系统。

在此处输入图像描述

[更新]

在对不同选项进行了进一步研究后，我发现使用 Observable Array 来跟踪所有内容是一个好主意。我发现与 underscore.js 一起使用的小型库：

https://github.com/mennovanslooten/Observable-Arrays

现在它只是处理数组的更新和过滤的一个例子，到目前为止我已经写了很多。

4

3 回答 3

1

为什么不使用带有 ajax 数据源的称为“自动完成”的 jQuery + jQuery UI 功能？

这是一个例子......

html:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Autocomplete - Remote datasource</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <style>
            .ui-autocomplete-loading {
            background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
            }
        </style>
        <script>
            $(function() {
                function log( message ) {
                    $( "<div>" ).text( message ).prependTo( "#log" );
                    $( "#log" ).scrollTop( 0 );
                }
                $( "#birds" ).autocomplete({
                    source: "search.php",
                    minLength: 2,
                    select: function( event, ui ) {
                        log( ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value );
                    }
                });
            });
        </script>
    </head>
    <body>
        <div class="ui-widget">
            <label for="birds">Birds: </label>
            <input id="birds" />
        </div>
        <div class="ui-widget" style="margin-top: 2em; font-family: Arial;">
            Result:
            <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
        </div>
    </body>
</html>

至于数据源（例如search.php）：http ://api.jqueryui.com/autocomplete/#option-source

完整的演示/文档/示例：http: //jqueryui.com/autocomplete/#remote

于 2013-10-24T10:39:10.863 回答
0

你的问题很不清楚。但看起来您当前正在向客户端提供完整的 HTML 内容，您可能希望将其更改为仅传输真实数据，然后在客户端上将其呈现为 HTML。你可以使用 jQuery 和插件来做到这一点，但在 AngularJS 中做到这一点会相当简单。

基本上你需要一些简单的代码来输出服务器返回的数据。最简单的只是重复迭代。这种重复也可以被过滤/排序。所以是这样的：

<div ng:repeat="hotel in hotels">
  <h1>{{hotel.name}}</h1>
  <p>{{hotel.description}}</p>
  ...whatever...
</div>

然后，您只需要让酒店充满数据，这可以通过 AngularJS $http 功能轻松实现，并在您的服务器上提供 JSON 格式的数据/搜索结果。如果您将 jQuery 与您提到的插件一起使用，您也将需要这个。哦，该插件的其他功能（如显示数据更改时的 CSS 转换）也内置在 AngularJS 中，并且可以轻松使用。

因此，如果您想采用向客户端传递数据然后使用 JavaScript 呈现输出的方式，您将需要一些可以提供 JSON 数据的服务器 API。无论您选择哪种进一步的路线（jQuery/MixItUp 或 AngularJS），您都需要这个。

这就是我可以根据您提供的输入给您的所有建议。

于 2013-10-29T20:12:37.137 回答
0

是的，一些框架会帮助创建这种功能，但由于您不一定熟悉这些框架，因此您自己编写代码会更简单/更快。

这里有一些关于如何实现它的建议：

后端

在Laravel 中创建你的 API 路由app/routes.php：

Route::get('api/hotels/{ordering}/page/{page}', 'ApiController@order');
//todo Validate data with regular expression

创建你的控制器app/controllers/ApiController.php：

class ApiController extends BaseController {

    public function getOrder($ordering, $page){

       $query = Hotel::select('*');

        switch($ordering){
            case "price":

                $query->orderBy('price', 'ASC');

            break;
            case "review":
                //...
            break; 
            default:
                //...
            break;
        }

        $query->take(10);

        //...paging

        $hotels = $query->get();

        return Response::json($hotels);
    }
}

前端

在您的 HTML 中创建具有不同排序操作的按钮：

Filter by:
<div class="btn" data-action="price">Price</button>
<div class="btn" data-action="review">Reviews</button>

Hotels:
<ul id="hotels"></ul>

在 Javascript 中，当单击按钮时，您会获取调用 Laravel API 的数据：

$('.btn').click(function() {

    var ordering = $(this).data('action');

    $.ajax({
        type: "get",
        url: "api/hotels/"+ordering+"/page/"+currentPage,            
        dataType: "json",
        success: function(result){         

            var $list = $('#hotels');

            $.each(result.hotels, function(idx, hotel) {

                $list.append('Hotel: '+hotel.name);
                //...
            });
        },
        error: function(xhr, desc, exceptionobj) {
            alert(xhr.responseText);
        }
    });
});

我希望它会帮助你。

于 2013-11-02T16:33:19.147 回答