Ajax autocompleteextender with results in a gridview

Question

User240536124 posted

I have a textbox with the autocompleteextender working on it. When you type in a string, it shows the results in a dropdown under the box. I would like to get rid of the dropdown and get the results in a datatable I can bind to a gridview. I kind of have this working with a textbox and using a _TextChanged event, but it isn't quiet as smooth as the autocompleteextender using Ajax. Done a lot of searching on this. I just haven't found a solution.

My autoextender calls:        (Normally working in C# now, but this autoextender is in VB).

<System.Web.Script.Services.ScriptMethod(), System.Web.Services.WebMethod()>

Public Shared Function SearchCustomers(ByVal prefixText As String, ByVal count As Integer) As List(Of String)

If I try and reference the Gridview in this public shared function, I run into this problem:

Cannot refer to an instance member of a class from within a shared method or shared member

If I change it from the Shared Function, my autoextender quits working.

Can anybody point me in the right direction to stop the dropdown on the textbox from populating and capturing the output of the my Public Shared Function to bind to a GridView? It would be much appreciated.

Am I maybe going about this wrong and there is some other way that would be better? Like I said, I have the autocomplete extender working and it seems quick and smooth. My textbox and a text changed event is just a little more hurky jerky.

My application is to search and populate a gridview with some checkboxes in the row so I can make a search with a multi-select function. The autocomplete extender isn't multi-select and I need to bring in more columns of data than the autoetender can work with.

Thanks,

 

Answer 1

User-2054057000 posted

You haven't provided your codes for autocompleteextender ajax control. You should also refer some tutorials that deals with this topic, check the below 2 links:

1. AutoCompleteExtender in ASP.Net

2. How to create jQuery Autocomplete Feature in Step by Step manner

Also you have to note that GridView can only be bind on the C# code (.aspx.cs) page and not on .aspx page. This is because GridView will be rendered as an HTML table on the .aspx page. 

So if you get the results of the data in json in your .aspx.cs page then you have to create a HTML table and show the data on it.

Answer 2

User240536124 posted

OK. I have a working autocompleteextender and it works fine. I also have a textbox with a text changed event that loads data in my gridview exactly the way I want.

What I don't like is that when a user goes between the two, which look almost identical, if they use the autocomplete, they get results the second they start typing in the box. With the text changed event, they have to click outside the box or hit enter to get the search results. This is kind of confusing. I know to click outside the box or hit enter, but not everyone does.

Is there a control that mimics the autocompleteextender that works better with a textbox and a gridview? Is there perhaps some javascript that makes a text change event fire without clicking outside the box or hitting enter?

Part of my problem is that there may be a better way of doing what I want than trying to hijack the output of the autocompleteextender, but I just don't know what it is called in order to search for it.

I have seen plenty of tutorials on the autocompleteextender. None of them say how to not display the results in the control provided dropdown and send them to another control.

I'm not the only one that ever thought of this, either. I just haven't found any explanations that make any sense to me...yet. A good answer here could help other people trying to do the same thing.

Thanks,

Answer 3

User-893317190 posted

Hi jay8anks,

If you want to show more than one column in  autocomplete, I think you should customize your own autocomplete.

Is there perhaps some javascript that makes a text change event fire without clicking outside the box or hitting enter

If you want to trigger event without clicking outside the box, you could register its onkeypress, it will trigger every time  the user inputs.

Best regards,

Ackerly Xu 

Answer 4

User240536124 posted

Ok, it is probably not something Amazon would implement, but this was the most dead simple example of something working I could find:

https://forums.asp.net/t/1960726.aspx?+sorting+on+grid+view+or+autocomplete+with+textbox+outside+gridview

With the amount of data we have, I couldn't tell much difference between this method and my working autocomplete extender, if any. But you are correct, this would rebind the gridview with each key press. The autocompleteextender will also repopulate its drowndown with one key stroke, so it must be hitting the db on a single keystroke, as well (though I think there are some settings for this, if memory serves me correctly).

The problem with custom coding an autocomplete extender is that I already know exactly how to use a gridview to multiselect items using checkboxes in a template field, and I would rather not reinvent the wheel.

If you search for something like "populate a gridview using an autocomplete extender located outside the gridview," there are lots of people wanting to know how to do this. The answers are all kind of sketchy. Examples don't always work. A lot of people misunderstand the question and think they want to use autocomple inside the gridview. Some answers are just filtering the loaded gridview, not making a trip to the db to get the new search term.

Thanks,