Question

我正在尝试实施搜索框。以下是代码（HTML和JS）

HTML

<form>
    <input type="text" ng-model="searchVar" class="searchbox">
    <input type="button" value="Search" ng-click="Search()" class="button">
</form>

JS

var Search = function() {

/* code to implement the table content loading part */    
//The following is what I have to filter out the table contents based on input in the text field

     if (($scope.searchVar) && (tableContent[i].indexOf($scope.searchVar) !== -1)) {
          ItemsToDisplay.push(tableContent[i])
     }  
    //Call function to load table
}

发生的事情是，如果我在输入文本字段中输入一些字符串，搜索算法工作正常，只显示相关项目。但是，如果我清除搜索框的内容并单击“搜索”按钮，则表格中不会显示任何内容。也就是说，当清除文本字段并单击搜索按钮时，就好像ItemsToDisplay为空且if条件失败。

有人可以解释为什么会这样吗？我怎么解决这个问题？

Answer 1

在indexOf（$ searchVar）之前，你应该检查searchVar是否为！=''。否则，之后不会显示任何项目。一个建议，javascript有一个非常棒的console.log功能，它可以帮助你很多，如果分支

Answer 2

如果您清除了输入，$ scope.searchVar的值将是未定义的，您的条件

 if (($scope.searchVar) && (tableContent[i].indexOf($scope.searchVar) !== -1))         {...}

将是假的，所以你没有进入ItemsToDisplay而没有任何追加。

我建议你写一个else语句：

if (($scope.searchVar) && (tableContent[i].indexOf($scope.searchVar) !== -1))         {...} 
else {
     ItemsToDisplay.push(tableContent[i]);
}

Answer 3

你可以试试，

if (($scope.searchVar) != undefined)

或

if (typeof ($scope.searchVar) != 'undefined')

Answer 4

如果您未在INPUT框中输入任何内容，则其值将变为UNDEFINED。你必须检查if（）条件，如果输入是未定义然后写你的逻辑，如果输入有一些值，那么写下你的逻辑。

<form>
        <input type="text" ng-model="searchVar" class="searchbox">
        <input type="button" value="Search" ng-click="Search()" class="button">
    </form>

    var Search = function() 
    {
         if ( $scope.searchVar == undefined){
            //Do something, input box is undefined 
         } 
         if (($scope.searchVar) && (tableContent[i].indexOf($scope.searchVar) !== -1)) {
                            ItemsToDisplay.push(tableContent[i]);
         }
    }

空文本输入框的值是多少？

4 个答案: