Filter the membership list in addition to the search area for the input text

src/components/views/rooms/MemberList.js

@@ -264,13 +264,23 @@ module.exports = React.createClass({
         return latB - latA;
     },
 
-    makeMemberTiles: function(membership) {
+    onSearchQueryChanged: function(input) {
+        this.setState({
+            searchQuery: input
+        });
+    },
+
+    makeMemberTiles: function(membership, query) {
         var MemberTile = sdk.getComponent("rooms.MemberTile");
+        query = (query || "").toLowerCase();
 
         var self = this;
 
         var memberList = self.state.members.filter(function(userId) {
             var m = self.memberDict[userId];
+            if (query && m.name.toLowerCase().indexOf(query) !== 0) {
+                return false;
+            }
             return m.membership == membership;
         }).map(function(userId) {
             var m = self.memberDict[userId];
@@ -329,20 +339,15 @@ module.exports = React.createClass({
             return (
                 <SearchableEntityList searchPlaceholderText={"Invite / Search"}
                     onSubmit={this.onInvite}
-                    entities={
-                        Entities.fromRoomMembers(
-                            room.getJoinedMembers()
-                        ).concat(
-                            Entities.fromUsers(allUsers, true, this.onInvite)
-                        )
-                    } />
+                    onQueryChanged={this.onSearchQueryChanged}
+                    entities={Entities.fromUsers(allUsers, true, this.onInvite)} />
             );
         }
     },
 
     render: function() {
         var invitedSection = null;
-        var invitedMemberTiles = this.makeMemberTiles('invite');
+        var invitedMemberTiles = this.makeMemberTiles('invite', this.state.searchQuery);
         if (invitedMemberTiles.length > 0) {
             invitedSection = (
                 <div className="mx_MemberList_invited">
@@ -359,7 +364,7 @@ module.exports = React.createClass({
                     {this.inviteTile()}
                     <div>
                         <div className="mx_MemberList_wrapper">
-                            {this.makeMemberTiles('join')}
+                            {this.makeMemberTiles('join', this.state.searchQuery)}
                         </div>
                     </div>
                     {invitedSection}

src/components/views/rooms/SearchableEntityList.js

@@ -26,16 +26,20 @@ var SearchableEntityList = React.createClass({
     propTypes: {
         searchPlaceholderText: React.PropTypes.string,
         emptyQueryShowsAll: React.PropTypes.bool,
+        showInputBox: React.PropTypes.bool,
+        onQueryChanged: React.PropTypes.func, // fn(inputText)
         onSubmit: React.PropTypes.func, // fn(inputText)
         entities: React.PropTypes.array
     },
 
     getDefaultProps: function() {
         return {
+            showInputBox: true,
             searchPlaceholderText: "Search",
             entities: [],
             emptyQueryShowsAll: false,
-            onSubmit: function() {}
+            onSubmit: function() {},
+            onQueryChanged: function(input) {}
         };
     },
 
@@ -46,12 +50,24 @@ var SearchableEntityList = React.createClass({
         };
     },
 
+    /**
+     * Public-facing method to set the input query text to the given input.
+     * @param {string} input
+     */
+    setQuery: function(input) {
+        this.setState({
+            query: input,
+            results: this.getSearchResults(input)
+        });
+    },
+
     onQueryChanged: function(ev) {
         var q = ev.target.value;
         this.setState({
             query: q,
             results: this.getSearchResults(q)
         });
+        this.props.onQueryChanged(q);
     },
 
     onQuerySubmit: function(ev) {
@@ -69,13 +85,21 @@ var SearchableEntityList = React.createClass({
     },
 
     render: function() {
-        return (
-            <div>
+        var inputBox;
+
+        if (this.props.showInputBox) {
+            inputBox = (
                 <form onSubmit={this.onQuerySubmit}>
                     <input className="mx_SearchableEntityList_query" type="text"
                         onChange={this.onQueryChanged} value={this.state.query}
                         placeholder={this.props.searchPlaceholderText} />
                 </form>
+            );
+        }
+
+        return (
+            <div>
+                {inputBox}
                 <div className="mx_SearchableEntityList_list">
                     {this.state.results.map((entity) => {
                         return entity.getJsx();