Question

我正在构建一个像redbus.in这样的onine总线预订网络应用程序，我希望在其中实现过滤搜索功能，就像在redbus中实现一样。

这是工作流程

1.有4个下拉框显示值droppint point，boardingpoint，bustype，opeartor name

2.当用户从下拉列表中选择一个dropping point时，结果将仅显示带有该丢弃点的总线列表，如果他选择dropping point和boarding point，则会显示仅包含其中两个的总线列表，等等。

即用户从这4个下拉菜单中选择的结果（总线列表）将仅包含这些值。

但我不知道如何实施它，特别是过滤。

以下是一条总线的样本json

{
      "droppingPoints": [
  {
          "time": "09:45 PM",
          "location": "Kachiguda",
          "id": "1283518"
        },
        {
          "time": "09:55 PM",
          "location": "Narayanaguda",
          "id": "1283519"
        },
        {
          "time": "10:05 PM",
          "location": "Lakdi ka pool",
          "id": "1283520"
        },
        {
          "time": "10:15 PM",
          "location": "Punjagutta",
          "id": "1283521"
        },
        {
          "time": "10:25 PM",
          "location": "Srinivasa Colony",
          "id": "1283522"
        },
        {
          "time": "10:25 PM",
          "location": "SR Nagar",
          "id": "1283523"
        },
        {
          "time": "10:25 PM",
          "location": "Ameerpet",
          "id": "1283524"
        },
        {
          "time": "10:30 PM",
          "location": "Erragadda",
          "id": "1283525"
        },
        {
          "time": "10:35 PM",
          "location": "Bharat Nagar",
          "id": "1283526"
        },
        {
          "time": "10:40 PM",
          "location": "VIVEKANANDA NAGAR",
          "id": "1283527"
        },
        {
          "time": "10:40 PM",
          "location": "Kukatpally",
          "id": "1282840"
        },
          ],
      "availableSeats": 4,
      "partialCancellationAllowed": false,
      "arrivalTime": "07:00 AM",
      "boardingPoints": [

        {
          "time": "10:45 PM",
          "location": "K P H B",
          "id": "1282841"
        },
        {
          "time": "10:55 PM",
          "location": "Hydernagar",
          "id": "1283073"
        },
        {
          "time": "10:55 PM",
          "location": "Nizampet",
          "id": "1283074"
        },
        {
          "time": "11:00 PM",
          "location": "MiyaPur",
          "id": "1283072"
        },
        {
          "time": "11:05 PM",
          "location": "Miyapur Allwin X Road",
          "id": "1283422"
        },
        {
          "time": "11:15 PM",
          "location": "Kondapur",
          "id": "1283423"
        },
        {
          "time": "11:20 PM",
          "location": "Gachibowli",
          "id": "1283554"
        }
      ],
      "operatorName": "Morning Star Travels",
      "departureTime": "10:30 PM",
      "mTicketAllowed": true,
      "idProofRequired": true,
      "serviceId": "1572",
      "fare": "1090.0, 1190.0",
      "busType": "2+1 Sleeper Non A/C",
      "routeScheduleId": "84W157YI3YGZKH5B9K0TG4E40VI13",
      "commPCT": 7.6,
      "operatorId": 1572,
      "inventoryType": 2
    }

目前我手中有这个代码

<script>
//when select item from dropping point
$('.drp').on('change',function(){
   search_buses();
});

//when select item from boarding point
$('.brp').on('change',function(){
   search_buses();
});

//when select item from butype
$('.bt').on('change',function(){
    search_buses();
});
//when select item from opearto name
$('.on').on('change',function(){
   search_buses();
});
//function for searching 
function search_buses(){
 //list of buses in json format.
  var bus_list;
}
</script>

我想在search_bus功能中实现过滤功能。但我不知道该怎么做。

Answer 1

过滤就像使用Log.d(TAG, "gps=" + mLastLocation.getTime()+ ", onboard=" + System.currentTimeMillis());和filter javascrip方法一样简单：

some

然后，您使用用户输入的位置调用function searchBusesByLocation(location) { filteredBuses = busesArray.filter(function (bus) {//this will create a new array with the filtered items return boardingPointLocationComparisson(bus, location); }); return filteredBuses; } function boardingPointLocationComparisson(bus, location) {//i'm guessin you want to filter by location, you can do by date or adapt this function like you want return bus.boardingPoints.some(function (boardingPoint) { //the some function will iterate over the array and return true whenever the comparisson is true, false otherwise return boardingPoint.location === location; }) }事件的searchBusesByLocation（您可以针对其他情况调整代码）。

使用jquery从json过滤搜索

1 个答案: