如何使用AngularJS中具有ID值的过滤器从用户列表中搜索用户

Question

I am working with a chat application. I need to put an input search box for the user to search for a friend from his friends list. I have written code to get ID values and and trigger it onkeyup. However, I am getting an uncaught reference error of function(name) is undefined. Here I am getting users list from server side using socket code.

Function in JS file

 $scope.searchFn = function () {
                var input, filter, ul, li;
                input = document.getElementById("input");
                //                filter = input.value.toUpperCase();
                ul = document.getElementById("list");
                li = ul.getElementsByTagName("li");
                for (i = 0; i < li.length; i++) {
                    a = li[i].getElementsByTagName("a")[0];
                    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        li[i].style.display = "";
                    } else {
                        li[i].style.display =
                            "none";
                    }
                }
            }

HTML

<main>
    <div class="container-fluid">
        <input type="hidden" id="user" value="<%= user.username %>" />
        <div class="row">
            <div class="col-sm-4">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <form action="/action_page.php" method="get">
                            <div class="input-group form-group">
                                <input id="input" class="form-control" name="browser" placeholder="Search friend.." ng-model="search" onkeypress="searchFn()">


                                <span class="input-group-btn">              
          <button class="btn btn-primary" type="button">
            <span class="glyphicon glyphicon-search"></span>
                                </button>
                                </span>

                            </div>
                        </form>
                        <h4 align="center">Friends</h4>
                    </div>
                    <div class="panel-body" id="scrl1">
                        <ul id="list"></ul>
                    </div>
                    <div class="panel-footer">
                        <p id="typing"></p>
                    </div>
                </div>
            </div>
            <div class=".space"></div>
            <div class="col-sm-8">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h4 id="frndName" align="center">Chat Room</h4>
                        <a ng-click="clearchat()">
                            <span class="glyphicon glyphicon-trash" style="float:right;margin-top:-4%"></span>
                        </a>
                    </div>
                    <div class="panel-body" id="scrl2">
                        <p id="loading" align="center">Loading.....</p>
                        <p id="noChat" align="center">No More Chats To Display.....</p>
                        <p id="initMsg">!!...Click On User Or Group Button To Start Chat...!!</p>
                        <ul id="messages"></ul>
                    </div>
                    <div class="panel-footer input-group" style="width:100%">

                        <form id="chatForm" action="" onsubmit="return false">
                            <input id="myMsg" class="input-box-send  form-control" ng-model="message" autocomplete="off" style="width:80%" placeholder="Write Message Here.." />
                            <button type="submit" id="sendBtn" class=" btn btn-primary " ng-disabled="!message" name="btn"><span class="glyphicon glyphicon-send"></span></button>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>
</main>

Answer 1

Don't use function expression $scope.searchFn = function () {} . Function expressions in JavaScript are not hoisted. Use named functions to avoid such cases

function searchFn() {...}

Answer 2

You are not using an angular directive for triggering the keypress event. The " onkeypress " is an html attribute so any function declared on $scope will not be accessible. You should use ng-keypress directive .

Before:

  <input id="input" class="form-control" name="browser" placeholder="Search friend.." ng-model="search" onkeypress="searchFn()">

After:

<input id="input" class="form-control" name="browser" placeholder="Search friend.." ng-model="search" ng-keypress="searchFn()">