Autocomplete - need a way to show the full drop down list

[Chris]

Our current app does it with a lot of javascript to link up a standard text box and a select list. I'm considering migrating the app to MVC so have been looking at the MVC control suite which meet most of our needs but I need a way to have a workable multi select drop down list.  

Our lists typically render a using a parttern using "code" - "value" so the Autocomplete looks perfect since it allows the users who know their list values to quickly enter them via the keyboard without needing to click entries in the list itself.

The one down side is that I can't see a way of forcing the drop down list to display - e.g. for users that don't know any of the list entries and want to show the full list of available options.

Is this possible or something that could be introduced in future? 

Is there a way to allow the user to make multiple selection (e.g. by using the Ctrl key) without needing to open up the list multiple times?

[Georgi Krustev]

Hello Chris,

 
Autocomplete UI component in general is a textbox with a list of suggestions. That is why the component does not have button for opening this list.

You can open suggestions list with current Client API of the component. For instance you can add button next to the autocomplete UI component and wire click event in order to open list:

function buttonClicked(e) {

$('#autocomplete').data('tAutocomplete').open();

}

Kind regards,
Georgi Krustev
the Telerik team

[Chris]

Thanks - I hadn't spotted that client option.  

That gets me part way there - now I just need your magic wands to allow multi-select on the list itself when it is open!

Thanks again for the quick response.

[Chris]

One problem with that call to Open() is that if any items have already been selected the list opens pre-filtered to values matching the last selected entry so it unfortunately it still doesn't satisfy my requirement.

[Georgi Krustev]

Hello Chris,

 You can rebind list when you need to open explicitly open it. Something like this:

autocomplete.dataBind(autocomplete.data, true)

Kind regards,
Georgi Krustev
the Telerik team

[Sean]

Good suggestion, but I keep getting an error that says, "Microsoft JScript runtime error: 'this.data.length' is null or not an object" and I'm not sure why?

 

function buttonClicked(e) {
    $('#City').data('tAutoComplete'

).open();
}

<input type="button" value=">>" onclick="buttonClicked()" />

 

@(Html.Telerik().AutoCompleteFor(m => m.City)
.Name(

 

"City")
.Encode(false)
.ClientEvents(events => {events.OnDataBinding("City_AutoComplete");})
.DataBinding(a => a.Ajax().Select("CityList", "Controller"))
.AutoFill(true)
.HighlightFirstMatch(true)
.HtmlAttributes(new { style = string.Format("width:{0}px", 320) })
)

 

 

 

 

 

[Georgi Krustev]

Hello Chris,

 
This error is raised because AutoComplete component does not have any data in the moment when the open() method is called. I have fixed this limitation in order to avoid this issue.

For your convenience I have  attached the modified JavaScript file.

Regards,
Georgi Krustev
the Telerik team

[Sean]

That works great with the button! However, I don't like having the button there...Is there a way to call open() when the Autocomplete gets focus instead?  I realize this would pass in a blank or null text value to the ajax Select function but that's OK I can handle that on the server.

[Sean]

Uhg, nevermind...Autocomplete won't work that way because it filters with either Contains or StartsWith and if I bring back values that don't match the filter in the JSonResult nothing will pop in the autocomplete list    :(