Creating a Web Messenger control from Scratch – Part 10

So far in this series we have covered quite a bit of ground including customizing the sign-in control, groups, contacts, new features of the 2.5 API including user images etc. For this part we will do a simple search function. If you can remember, one of our original goals was to mimic the Messenger Client as closely as possible with the limitations that a browser based User Control will have.  If you take a look at the messenger client you will see a search bar :-

messengerclientsearch_thumb_5b7f67a8 Developer

This search bar is used to both search the web and also as a quick search through your contacts list.  We won’t bother with the internet search at the moment but will implement the quick contacts based search.

We already have the basis for everything we need. It’s just a matter of adding some more code and another function to our existing MessengerContacts.js class.

First off let’s add the code to our base file ascx to enable searching. Right under the “setPeronalMessage” section we will add the following :-

<tr>
    <td>
        <div id="searchContacts">
            <span><b>Search for Contact: </b></span>
            <input id="search" type="text" />
            <input onclick="btnSearchClick();" id="btnSearch" type="image" src="WebMessenger/Images/SearchContact.gif" value="Search" />
        </div>
        <div id="searchResults">
        </div>
    </td>
</tr>

 

Here we are just displaying a search box with a button to kick off  the search.

 

messengeremptycontactsearch_thumb_24a51362 Developer

When you click on the search button we kick off simply invoke a simple Javascript function :-

function btnSearchClick()
{
    removeChildrenFromNode("searchResults");
    var searchfor = $get("search").value;
    if (ContactsList != null)
    {
        var ContactsLength = ContactsList.getLength();
        for (var counter = 0; counter < ContactsLength; counter++)
        {
            var name = ContactsList[counter].get_ContactName();
            var regexp = new RegExp(searchfor);
            var res = regexp.exec(name);
            if (res != null)
            {
                ContactsList[counter].DisplaySearchContact();
            }
        }
    }
    else
    {
        alert("You currently do not have any contacts to search”);
    }
}

 

 

First off we clear out the current search area using the removeChildrenFromNode function we already had, passing in the id of the search results DIV.

Next we get the value that the user entered in the search text box. We already have a list of Contacts stored as an array in the variable ContactsList when we created all the contacts. So here we simply iterate through that array of contacts, get the Contact Name from each object and perform a simple regular expression search on the contact name to see if the characters that the user typed in the search box match. If they do then we call the DisplayContactSearch method of the corresponding MessengerContacts class to display the contact in the search results area. If no match then we continue through the loop.

The only other thing we need is the new DisplayContactSearch method in our MessengerContacts class :-

DisplaySearchContact: function()
{
    if ($get("SearchContact" + this.ContactName) == null)
    {
        //Get base group DOM element
        var link = document.createElement("a");
        link.href = "javascript:createConv('" + this.Index + "');";
        link.className = "ContactLink";
        link.id = "SearchContactImgLink" + this.ContactName;
        var textlink = document.createElement("a");
        textlink.href = "javascript:createConv('" + this.Index + "');";
        textlink.className = "ContactLink";
        textlink.id = "SearchContactTextLink" + this.ContactName;
        var outerdiv = document.createElement("div");
        outerdiv.id = "SearchContact" + this.ContactName;
        //Status and picture holder
        var PicOutline = document.createElement("div");
        PicOutline.id = "SearchContactStatus" + this.ContactName;
        PicOutline.className = "ContactImgOutline";
        var ContactPicHolder = document.createElement("div");
        ContactPicHolder.id = "SearchContactImgHolder" + this.ContactName;
        ContactPicHolder.className = "ContactImgHolder";
        //Create a span to place the name of the contact
        var ContactNameHolder = document.createElement("div");
        ContactNameHolder.id = "SearchContactNameHolder" + this.ContactName;
        ContactNameHolder.className = "ContactNameHolder";
        var name = document.createElement("span");
        name.className = "ContactName";
        name.id = "SearchContactName" + this.ContactName;
        //create a horizontal rule to seperate contact
        var hr = document.createElement("hr");
        //Build the heirarchy
        ContactPicHolder.appendChild(link);
        PicOutline.appendChild(ContactPicHolder);
        textlink.appendChild(name);
        ContactNameHolder.appendChild(PicOutline);
        ContactNameHolder.appendChild(textlink);
        outerdiv.appendChild(ContactNameHolder);
        outerdiv.appendChild(hr);
        this.DisplayContactImage(link)
        this.ChangeContactStatus(PicOutline);
        this.DisplayContactName(name);
        //get the groupDiv
        var grp = $get("searchResults");
        //add the contact to the search results
        grp.appendChild(outerdiv);
    }
},

 

 

Now all of the above code should look very familiar to you as it’s basically just the DisplayContact method we talked about and implemented in the last part of this tutorial series.  The only difference between the two are that all of the IDs have changed to include the word “Search” so that they are different from the normal Contacts list. e.g. :-

link.id = "ContactImgLink" + this.ContactName;

 

 

Now becomes :-

link.id = "SearchContactImgLink" + this.ContactName;
 
The only other difference is at the end of the code where we get the add the contact to. Instead of :-
 
//get the groupDiv
var grp = $get("group" + this.GroupName);

 

 

 

We have changed this to :-

//get the groupDiv
var grp = $get("searchResults");

 

And we end up with the following :-

messengersearch_thumb_38be2feb Developer

There you have it. A quick Contact Search function just like in the Messenger Client.