How To Emulate Facebook Search Behavior Using A RadComboBox

[Troy]

If you want to emulate the search behavior of Facebook, I have included sample code below. The Facebook search allows the user to enter text in the input field and highlights the first item in the results. If the user presses the enter key after typing in a name, the first item in the search results is sent to the server on the postback. Thanks goes to Dimitar at Telerik for this solution.

<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
<asp:Panel ID="Panel1" DefaultButton="Button1" runat="server">
    <telerik:RadComboBox
        ID="RadComboBox1"
        AllowCustomText="true"
        AutoCompleteSeparator=","
        EnableLoadOnDemand="true"
        EnableTextSelection="true"
        MarkFirstMatch="true"
        OnClientDropDownOpening="onClientDropDownOpening"
        OnClientItemsRequested="onClientItemsRequested"
        OnClientSelectedIndexChanging="OnClientSelectedIndexChanging"
        Skin=""
        runat="server">
        <CollapseAnimation Type="None" />
        <ExpandAnimation Type="None" />
        <WebServiceSettings Path="WebService1.asmx" Method="GetSearchResults" />
    </telerik:RadComboBox>
    <asp:Button ID="Button1" Text="Submit" OnClick="Button1_Click" runat="server" />
</asp:Panel>
<asp:Label ID="Label1" runat="server" />
<script type="text/javascript">
    var flag;
    var $ = $telerik.$;
    var $T = Telerik.Web.UI;
    var $p = Telerik.Web.UI.RadComboBox.prototype;

    function pageLoad()
    {
        flag = true;
    }

    function OnClientSelectedIndexChanging(sender, args)
    {
        var domEvent = args.get_domEvent();
        if (domEvent.type == "click")
        {
            flag = true;
            sender.set_text(args.get_item().get_text());
        }
    }

    $p.set_text = function (value)
    {
        value = $T.RadComboBox.htmlDecode(value);
        this.get_element().value = value;
        this._suppressChange = true;
        var inputElement = this.get_inputDomElement();

        if (flag)
        {
            inputElement.value = value;
        }

        inputElement.className = "rcbInput";
        this.set_value("");

        if (inputElement.fireEvent && document.createEventObject)
        {
            var eventObject = document.createEventObject();
            inputElement.fireEvent("onchange", eventObject);
        }
        else if (inputElement.dispatchEvent)
        {
            var canBubble = true;
            var eventObject = document.createEvent("HTMLEvents");
            eventObject.initEvent("change", canBubble, true);
            inputElement.dispatchEvent(eventObject);
        }

        this._suppressChange = false;
        this._ensureChildControls();
        this.updateClientState();
    },

    $p._onKeyDown = function (e)
    {
        flag = false;
        var keyCode = e.keyCode || e.which;

        if (keyCode == $T.Keys.Escape)
        {
            e.preventDefault();
        }

        if ($telerik.isIE && keyCode != $T.Keys.Down && keyCode != $T.Keys.Up)
        {
            this._updateFilterText = true;
        }

        if (!this._fireEvents || this._ajaxRequest) return;

        if ($telerik.isIE9 && (keyCode == 8 || keyCode == 127))
        {
            this._compensateValuePropertyChangeEvent = true;
        }

        if (!e) e = event;
        {
            this.raise_onClientKeyPressing(e);
        }

        this._lastKeyCode = keyCode;

        if (keyCode == $T.Keys.Escape && this.get_dropDownVisible())
        {
            this._hideDropDown(e);
            return;
        }
        else if (keyCode === $T.Keys.Enter)
        {

            if (this.get_dropDownVisible())
            {
                this._hideDropDown(e);
            }

            var itemToBeSelected = this.findItemByText(this.get_text());

            if (this.get_allowCustomText() && !this.get_markFirstMatch() && !itemToBeSelected)
            {
                if (this.raise_selectedIndexChanging(null, e) == false)
                {
                    var selectedItem = this.get_selectedItem();
                    var highlightedItem = this.get_highlightedItem();

                    if (selectedItem)
                    {
                        selectedItem.set_selected(false);
                    }

                    if (highlightedItem)
                    {
                        highlightedItem.unHighlight();
                    }

                    this.set_selectedItem(null);
                    this.set_selectedIndex(null);
                    this.set_highlightedItem(null);

                    this.raise_selectedIndexChanged(null, e);

                    var command = { Command: "Select", Index: -1 };
                    this.postback(command);
                }
            }
            else
            {
                this._performSelect(this.get_highlightedItem(), e);
            }

            if (this.get_markFirstMatch())
            {
                var textLength = this.get_text().length;
            }

            return;
        }
        else if (keyCode === $T.Keys.Down)
        {
            e.returnValue = false;
            if (e.altKey)
            {
                this._toggleDropDown(e);
                return;
            }

            this.highlightNextItem(null);

            if (e.preventDefault)
            {
                e.preventDefault();
            }

            return;
        }
        else if (keyCode === $T.Keys.Up)
        {
            e.returnValue = false;
            if (e.altKey)
            {
                this._toggleDropDown(e);
                return;
            }

            this.highlightPreviousItem();

            if (e.preventDefault)
            {
                e.preventDefault();
            }

            return;
        }
        else if (keyCode === $T.Keys.Tab)
        {
            if (this.get_dropDownVisible())
            {
                this._hideDropDown(e);
            }

            this._raiseClientBlur(e);
            this._selectItemOnBlur(e);
            this._applyEmptyMessage();
            this._focused = false;
            return;
        }

        if (keyCode == $T.Keys.Left || keyCode == $T.Keys.Right)
        {
            return;
        }

        if (keyCode >= $T.Keys.Numpad0 && keyCode <= $T.Keys.Numpad9)
        {
            keyCode -= ($T.Keys.Numpad0 - $T.Keys.Zero);
        }

        var letter = String.fromCharCode(keyCode);

        if (letter && (!e.altKey) && !(this.get_enableLoadOnDemand() || !this.get_readOnly()))
        {
            this.highlightNextItem(letter);
            return;
        }
    };


    function onClientDropDownOpening(sender, eventArgs)
    {
        if (sender._filterText.length < 1)
        {
            eventArgs.set_cancel(true);
        }
    }

    function onClientItemsRequested(sender, eventArgs)
    {

        if (sender.get_items().get_count() > 0)
        {

            $('.rcbSlide').show();
        }
        else
        {
            $('.rcbSlide').hide();
        }
    }
</script>
</form>

using System;
using System.Web.UI;

namespace WebApplication1
{
    public partial class WebForm1 : Page
    {
        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = RadComboBox1.SelectedValue;
            RadComboBox1.Text = string.Empty;
        }
    }
}

using System.Collections.Generic;
using System.ComponentModel;
using System.Web.Script.Services;
using System.Web.Services;
using Telerik.Web.UI;

namespace WebApplication1
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ToolboxItem(false)]
    [ScriptService]
    public class WebService1 : WebService
    {
        [WebMethod]
        public RadComboBoxItemData[] GetSearchResults(object context)
        {
            IDictionary<string, object> contextDictionary = (IDictionary<string, object>)context;
            string searchString = contextDictionary["Text"].ToString();

            if (searchString.Length > 1)
            {
                List<RadComboBoxItemData> results = new List<RadComboBoxItemData>();
                results.Add(new RadComboBoxItemData { Text = "School", Value = "1" });
                results.Add(new RadComboBoxItemData { Text = "Text Book", Value = "2" });
                results.Add(new RadComboBoxItemData { Text = "Ruler", Value = "3" });
                results.Add(new RadComboBoxItemData { Text = "Chalk", Value = "4" });
                results.Add(new RadComboBoxItemData { Text = "Teacher", Value = "5" });
                results.Add(new RadComboBoxItemData { Text = "Math", Value = "6" });
                results.Add(new RadComboBoxItemData { Text = "Science", Value = "7" });
                results.Add(new RadComboBoxItemData { Text = "Language", Value = "8" });
                results.Add(new RadComboBoxItemData { Text = "Music", Value = "9" });
                results.Add(new RadComboBoxItemData { Text = "Desk", Value = "10" });
                return results.ToArray();
            }
            else
            {
                return new RadComboBoxItemData[0];
            }
        }
    }
}