AutocompleteProperties

[Prasanth]

Hi there,

I am having trouble with using AutocompleteFor based on some data on database.  Basically I want the users to be able to select a User by searching for the user Name on the AutocompleteFor and able to use the selected UserID to execute some backend code.

I have tried to use AutocompleteProperties but no luck there.

If you could guide me with a sample that would be great

Regards

Prasanthan

[Harikrishnan P]

Hi Prasanthan,

Thanks for contacting Syncfusion support.

We can get the ID of the selected item using the “getSelectedItems()” method. In the “select” event of the Autocomplete, we can pass the value to the server side. Please refer the below code snippets,

[View]

@Html.EJ().AutocompleteFor(model => model.value, (Syncfusion.JavaScript.Models.AutocompleteProperties)ViewData["auto"])

<script>

    var key, selectedItems, autocompleteobj;

    function onSelect(args) {

        key = [];

        //Object for Autocomplete created

        autocompleteobj = $("#value").data("ejAutocomplete");

        //get the data from getSelectedItems()

        selectedItems = autocompleteobj.getSelectedItems();

        //Key is obtained here

        var itemId = selectedItems[0].uniqueKey;

        $.ajax({

            url: '/Autocomplete/ID',

            type: 'POST',

            data: { id: itemId },

            success: function (result) {

                alert("ID posted sucessfully");

            },

            error: function (e) {

                console.log(e);

            }

        });

    }

</script>

[controller]

        public ActionResult Index()

        {

            AutocompleteProperties auto = new AutocompleteProperties();

            auto.DataSource = GetDataSource();

            auto.FilterType = FilterOperatorType.Contains;

            AutocompleteFields fld = new AutocompleteFields();

            auto.Select = "onSelect";

            ViewData["auto"] = auto;

            return View();

        }

We have also attached a sample for your reference, please check it.

Sample Location: autocompleteFor sample

Please refer the following link to know about the important features available in each EJMVC component

http://help.syncfusion.com/aspnetmvc

 

Our EJMVC components are created as wrapper for the JavaScript components. So the API, and events will be the same in both JS and EJMVC components. You can refer the following API reference section present in our online JS help document to know about the list of API’s, methods and events supported by each components.

http://docs.syncfusion.com/js/api/ejaccordion

Regards,

HariKrishnan

[Prasanth]

Hi HariKrishnan

Thanks for the prompt reply.  But I think I failed to explain bit more in the last post.  The model for example has multiple properties in it.  E.g Project class is model with Leader is one of the property in the Project class where users can use Autocomplete to search for the people to select the user and fill in other properties in Project class.  I am bit stuck on how to store the selected value in the complex object (Project) so during HttpPost on the controller side the Project instance is populated with the data.  

I will give it a go but still struggling, if you have infor on this please share it could save lot of time for me :-)

I am using MVC5, syncfusion 13.3.0.7 (visual studio 2015)

Regards

Prasanth

[Harikrishnan P]

Hi Prasanthan,

Thanks for your update.

We need to bind the “Project” class in the controller action during HttpPost, so the Autocomplete selected value will be automatically populated in the controller action. Please refer the below code snippet,

        [HttpPost]

        public ActionResult ProjectDetails(Project model)

        {

            ViewBag.LeaderName = model.Leader;

            return View(model);

        }

In the “model” you will get the values of all the properties in the “Project” class. We have attached a sample for your reference, please check it.

Sample Location: AutocompleteFor sample

If you need further assistance, kindly get back to us with more information and we will be happy to help you.

Regards,

HariKrishnan

[Prasanth]

Hi Harikrishnan,

Sorry for getting back late, I have managed to implement what I was after.  As I had Model which had ID reference property of another Model, I worked around the issue by having two Html entries (one for showing the Autocomplete and hidden field for storing selected ID via AutoComplete).  

For example let's say I had project manager associated with a project.  On project add/edit cshtml I would have the following

@Html.HiddenFor(model => model.ProjectManager)

@Html.EJ().AutocompleteFor(model => model.ProjectManagerName, (Syncfusion.JavaScript.Models.AutocompleteProperties)ViewData["autoProjManager"])

<script>

    function onAutCompleteSelect(args, nameField, idField) {

        var key, selectedItems, autocompleteobj;

        key = [];

        //Object for Autocomplete created

        autocompleteobj = $(nameField).data("ejAutocomplete");

        //get the data from getSelectedItems()

        selectedItems = autocompleteobj.getSelectedItems();

        //Key is obtained here

        var itemId = selectedItems[0].ID;

        document.getElementById(idField).value = itemId;

    }

    function onProjectManagerSelect(args) {

        onAutCompleteSelect(args, "#ProjectManagerName", 'ProjectManager');

    }

and on the controller side set up Autocomplete properties as per your example.

AutocompleteProperties autoProjManager = Utility.GetUserAutoComplete();

autoProjManager.Select = "onProjectManagerSelect";

ViewData["autoProjManager"] = autoProjManager;

I have got the page working.  Just wanted to know whether this is the right approach or is there any other appropriate approach to the solution.  

Regards

Prasanthan

[Manikandan Mariappan]

Hi Prasanthan,
 
We have analyzed your code that you have provided, and it seems to be the proper way for getting ID in controller page.
 
If you need any further assistance we will happy to help you.
 
Regards,
M.Manikandan