Question

我正在使用离子的angularjs项目，我提供了一个搜索栏，用户可以在其中搜索项目。搜索工作完美，但搜索问题是当用户在搜索文本框中输入光标并输入一些名称并显示所需的结果时，当用户决定清除搜索并使该框为空时，它会自动显示4 HTML中的空列表。

PHP

$data = file_get_contents("php://input");

        $objData = json_decode($data);

        $key =  $objData->data;
        if(!empty($key)){

            $sql = "SELECT profile_id,fname,lname,RTRIM(profile_pix)as profile_pic from users where CONCAT (fname,lname)LIKE '%$key%' ";

            $result = mysql_query($sql, $db) or die(mysql_error());
            $output = array();
            while ($row = mysql_fetch_array($result)) {
                $output[] = $row;
             }
            echo json_encode($output);
        }

JS

.controller('SearchController', function($scope, $http){

    $scope.url = 'http://localhost/dbapp/templates/search/search.php'; // the get request page
    $scope.search = function (data){

        //create the http post request
        //the data holds the search key
        //the request is a json request
        $http.post($scope.url,
        {"data":$scope.keybords}
                ).success(function (data, status){
                    $scope.status = status;
                    $scope.data = data;
                    $scope.result = data;
                console.log(JSON.stringify(data));
                }).error(function (data, status){
                    $scope.data = data || "Request Failed";
                    $scope.status = status;
                });
    };
})

HTML

<ion-view>
 <ion-content ng-controller="SearchController" overflow-scroll="false" >

     <div class="item-input-inset bar-light">
        <label class="item-input-wrapper">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="search" ng-model="keybords" ng-keyup="search()" class="input-medium form-control search-query searchbox" 
            placeholder="Search" | limitTo:20 />
        </label>

     </div>
      <div ng-repeat="res in result track by $index">
      <div class="list">
    <a class="item item-avatar" href="#/tab/search/{{res.profile_id}}/{{profile_id}}">
      <img  class="line_photo_placeholder" src="http://localhost/db/resize_image/image.php?image={{res.profile_pix}}&new_width=200&new_height=200">
      <h2>{{res.fname}} {{res.lname}}</h2>
      <p>{{res.country}}</p>
    </a>
</div>
</div>

     </ion-content>
    </ion-view>

Answer 1

使用CONCAT_WS

CONCAT_WS('',fname,lname)

如果字段为NULL，则CONCAT_WS是安全的。如果任何连接字段为空，CONCAT将返回NULL。

Answer 2

如果我理解正确，在搜索数据之前，列表中有一些数据。当用户清除搜索时，列表为空？

如果是这种情况，那么您必须在搜索功能中处理以下内容：

$scope.search = function (data){

    //create the http post request
    //the data holds the search key
    //the request is a json request


    // If searchbar is empty
    if (!data) {
        // get the original list
    }
    if (data) {
        $http.post($scope.url, {"data":$scope.keybords})
            .success(function (data, status){
                $scope.status = status;
                $scope.data = data;
                $scope.result = data;
                console.log(JSON.stringify(data));
            })
            .error(function (data, status) {
                $scope.data = data || "Request Failed";
                $scope.status = status;
            });
    }
};

Answer 3

你需要通过将模型传递给你的函数来检查输入值，如果模型包含任何值，那么只调用你的api，如果它为null，只需返回或做你想做的事情

ng-model="keybords" ng-keyup="search(keybords)"

我通过条件提醒数据做了一个小plunker，您可以通过输入和删除数据进行检查

当用户清除搜索框时，Angularjs搜索结果显示空列表

3 个答案: