This is a migrated thread and some comments may be shown as answers.

Autocomplete isn't auto-completing when I type

1 Answer 79 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Anye
Top achievements
Rank 1
Anye asked on 16 Apr 2013, 03:59 PM
I am trying to implement an Autocomplete on a partial view.  The model contains the data in a property called AvailableMatters which is an IEnumerable<Matter>.  Matter has a property called "Name" which is what I want to display and have users type in the autocomplete box.

Looking at the html that is being rendered, it's got my data in the autocomplete widget.  However, nothing happens when you type in the autocomplete box. 
This is the html that is being rendered:
 <input id="activeMatterID" name="activeMatterID" type="text" />
<script>
    jQuery(function(){jQuery("#activeMatterID").kendoAutoComplete({"select":activeMatterIDSelected,"change":activeMatterIDChanged,
"dataSource":[{"MatterID":10259,"IsMasterDataset":false,"IsChildMatter":false,"ParentMatterID":0,"ParentMatterName":null,"Name":"01_Automated Test Matter","ClientID":3089,"ClientName":"01_AutomatedTestClient","SubClientID":0,"SubClientName":null,"Description":"","ServerID":1,"DatabaseName":"20_10259_3089_Matter_100062_22Jan13_052007","JobNumber":0,"Status":1,"StatusDisplay":1,"Priority":2,"EstimatedJobSizeInGb":0,"ArchiveLocation":null,"DBSchemaVersion":"5.0.0.0","AccountManagerID":21,"AccountManagerName":"Bob Jones","ClientMatterPO":"Matter Test","ContactName":"","ContactPhone":"","ProjectPath":null,"DisplayProjectPath":"","BackupNotes":null,"CurrentLoadVersion":null,"CreatedBy":67,"CreatedDate":"\/Date(1358896807610)\/","ModifiedBy":67,"LastModifiedDate":"\/Date(1358896807610)\/","LastAccessedDate":"\/Date(-62135575200000)\/","LastBackupDate":"\/Date(-62135575200000)\/","TimeZoneName":null},{"MatterID":10263,"IsMasterDataset":false,"IsChildMatter":false,"ParentMatterID":0,"ParentMatterName":null,"Name":"01_AutomatedTestMatter2","ClientID":3089,"ClientName":"01_AutomatedTestClient","SubClientID":0,"SubClientName":null,"Description":"","ServerID":1,"DatabaseName":"20_10263_3089_Matter_23Jan13_023035","JobNumber":0,"Status":1,"StatusDisplay":1,"Priority":2,"EstimatedJobSizeInGb":0,"ArchiveLocation":null,"DBSchemaVersion":"5.0.0.0","AccountManagerID":21,"AccountManagerName":"Bob Jones","ClientMatterPO":"987654","ContactName":"","ContactPhone":"","ProjectPath":null,"DisplayProjectPath":"","BackupNotes":null,"CurrentLoadVersion":null,"CreatedBy":67,"CreatedDate":"\/Date(1358973035963)\/","ModifiedBy":67,"LastModifiedDate":"\/Date(1358973035963)\/","LastAccessedDate":"\/Date(-62135575200000)\/","LastBackupDate":"\/Date(-62135575200000)\/","TimeZoneName":null},],
"dataTextField":"Name",
"placeholder":"Search..."});});
</script>

In Firebug if I look at the HTML view it actually shows me stuff I can't see from the page source, presumably digging down into the Kendo script somewhere:
<span class="k-widget k-autocomplete k-header k-state-default" tabindex="-1" role="presentation" style=""><input id="activeMatterID" class="k-input" type="text" name="activeMatterID" data-role="autocomplete" placeholder="Search..." style="width: 100%;" autocomplete="off" role="textbox" aria-haspopup="true" aria-disabled="false" aria-readonly="false" aria-owns="activeMatterID_listbox" aria-autocomplete="list"><span class="k-icon k-loading" style="display:none"></span></span>

Why does autocomplete="off"?  I don't see anywhere in the helper where I can explicitly turn this on?

And this is the helper code, which was derived from your documentation.
 @(Html.Kendo().AutoComplete()
          .Name("activeMatterID") //The name of the autocomplete is mandatory. It specifies the "id" attribute of the widget.
          .DataTextField("Name") //Specifies which property of the Matter to be used by the autocomplete.
          .BindTo(Model.AvailableMatters)   //Pass the list of Matters to the autocomplete.
          .Events(e => e.Select("activeMatterIDSelected").Change("activeMatterIDChanged"))
          .Placeholder("Search...")
          )

On screen it just looks like a blank textbox.  I do not even see the placeholder text.  I have the latest version  of these Kendo UI Complete plus MVC, I only downloaded it yesterday.

The change event does fire, the value is whatever got typed into the box (which generally isn't valid because no autocomplete occurred and users aren't going to know the exact name type type in.

We are not using any Telerik data sources, we have a custom WCF service we use to retrieve data so we do not want the autocomplete to bind to anything other than the data we pass in via the model.  I want to just capture the select & change events to call our own methods to act based on what they select.

So..what do I need to do to get the autocomplete to function (i.e. to autocomplete when a user types)?

As a second question, ideally I would like to capture not the text that they type but another field on the object associated with their selection.  The objects are Matters, we are showing the Matter.Name, but I would like to retrieve the Matter.MatterID and use this to act off of instead of the Matter.Name.  Is this possible, and how would I do this?  I can work off name if necessary but it's sub-ideal.  My main concern at the moment is getting the autocomplete to work.

Thanks in advance!

1 Answer, 1 is accepted

Sort by
0
Accepted
Robert
Top achievements
Rank 1
answered on 16 Apr 2013, 10:16 PM
This problem can be caused by having a conflict with an older version of the jquery-ui library (for example 1.8.18).  Trying version 1.10.2 will fix your problem.
Tags
AutoComplete
Asked by
Anye
Top achievements
Rank 1
Answers by
Robert
Top achievements
Rank 1
Share this question
or