Display search results dynamically as typing

Question

Hi Guys,

I am trying to build a SharePoint 2007 web part in Visual Studio. This web part should search a sharepoint list and display the results.

What I want to accomplish is to display the results as soon as the user stops typing, so no clicking button involved.

Probably, a combination of text_changed event and onkeydown javascript?

Any thought would be great.

This sharepoint site is "Ajax-enabled", btw.

Thanks

Answer 1

I would suggest using jquery and keyup:

$("input#txtid").keyup(function () {
                if (this.value.length < 8)
                    return false;

                $.get("ServiceUrl", { arg: this.value }, function (result) { $("#output").html(result); });

            });

Answer 2

Hi Madatanic

The easiest way to take care of the UI part is to use the AjaxToolkit AutoCompleteExtender se MOSS, AJAX and the AutoCompleteExtender then all you have to do is decide how you want the searching inside the web service to work

Answer 3

I approached this by using an UpdatePanel in my webpart. Then I added a Button (more on this later) and a TextBox to the UpdatePanel.

I also have a JavaScript class which handles all of the logic for submitting a query after the user has paused while typing their query. It contains the event handler for the onkeyup event which is attached to the TextBox:

t.Attributes.Add("onkeyup", "javascript:oSearchClass.KeyUpEventHandler(event);");

I used setTimeout and clearTimeout to handle when the class should call a SubmitQuery function.

When SubmitQuery() is called, it makes the TextBox read only (so the user can't type anything while it is querying) and then "clicks" the button using click(). Since you're using a normal Button, you can handle the Button.click event like normal to re-query the list and display results.

If you don't want your user to see the button, you can simply put it inside a span WebControl that is hidden.

Answer 4

Have a look at this sample, it adds 'search as you type' to the standard SharePoint search box.

Automatically add ‘Search As You Type’ to every SharePoint page using Infuser.