Autocomplete select returns null value

[Arshad]

ej.base.enableRipple(true);

//  S E A R C H     B A R

// initialize AutoComplete component

var atcObj1 = new ej.dropdowns.AutoComplete({

    // bind the DataManager instance to dataSource property

    dataSource: new ej.data.DataManager({ url: 'https://icdsearchjsonservice.azurewebsites.net/api/ICD10CM', adaptor: new ej.data.WebApiAdaptor(), crossDomain: true }),

    // set the count for displays the suggestion items.

    suggestionCount: 50,

    // bind the Query instance to query property

    query: new ej.data.Query().from('getsearchautocomplete1').select(['full_title', 'code']).take(10).requiresCount(),

    // map the appropriate columns to fields property

    fields: { value: "full_title" },

    itemTemplate: "<span>${full_title} - <b>${code}</b></span>",

    // set the placeholder to AutoComplete input element

    placeholder: 'Search for an ICD 10 CM Code or free text...',

    // sort the resulted items

    sortOrder: 'Ascending',

    // enable the autofill property to fill a first matched value in input when press a down key

    autofill: false,

    // set the filterType to searching operation

    filterType: 'Contains',

    // text highlight

    highlight: true,

    floatLabelType: "Auto",

    autoFocus: true,

    select: function(argument) {

        console.log("New value selected is " + atcObj1.text);

        // Render the TreeView with hierarchical data source

        var data = new ej.data.DataManager({

            url: 'https://services.odata.org/V4/Northwind/Northwind.svc',

            adaptor: new ej.data.ODataV4Adaptor(),

            crossDomain: true,

        });

        var query = new ej.data.Query().from('Employees').select('EmployeeID,FirstName,Title').take(10);

        var query1 = new ej.data.Query().from('Orders').select('OrderID,EmployeeID,ShipName').take(10);

        var treeObj = new ej.navigations.TreeView({

            fields: {

                dataSource: data,

                query: query,

                id: 'EmployeeID',

                text: 'FirstName',

                hasChildren: 'EmployeeID',

                tooltip: 'Title',

                child: { dataSource: data, query: query1, id: 'OrderID', parentID: 'EmployeeID', text: 'ShipName' }

            }

        });

        treeObj.appendTo('#tree');

    },

});

atcObj1.appendTo('#search-bar');

Autocomplete select returns a null value on first-time and second-time when the search suggestion selected it shows previously selected value.

Please guide me to solve this issues.

this is my code.

[Joseph Christ Nithin Issack]

Hi Arshad, 

  Thank you for contacting us. 

   We have checked the code. You have used atcObj1.text  to return the argument in the select event. Instead you have to use argument.itemData.full_title to return the selected value, atcObj1.text  will return the already selected value which is the reason you are getting the null value on first-time and second-time the previously selected value. We have altered your code 

 

ej.base.enableRipple(true); 

 

//  S E A R C H     B A R 

 

// initialize AutoComplete component 

var atcObj1 = new ej.dropdowns.AutoComplete({ 

    // bind the DataManager instance to dataSource property 

    dataSource: new ej.data.DataManager({ url: 'https://icdsearchjsonservice.azurewebsites.net/api/ICD10CM', adaptor: new ej.data.WebApiAdaptor(), crossDomain: true }), 

    // set the count for displays the suggestion items. 

    suggestionCount: 50, 

    // bind the Query instance to query property 

    query: new ej.data.Query().from('getsearchautocomplete1').select(['full_title', 'code']).take(10).requiresCount(), 

    // map the appropriate columns to fields property 

    fields: { value: "full_title" }, 

 

    itemTemplate: "<span>${full_title} - <b>${code}</b></span>", 

    // set the placeholder to AutoComplete input element 

    placeholder: 'Search for an ICD 10 CM Code or free text...', 

    // sort the resulted items 

    sortOrder: 'Ascending', 

    // enable the autofill property to fill a first matched value in input when press a down key 

    autofill: false, 

    // set the filterType to searching operation 

    filterType: 'Startswith', 

    // text highlight 

    highlight: true, 

 

    floatLabelType: "Auto", 

 

    autoFocus: true, 

 

    select: function(argument) { 

        console.log("New value selected is " + argument.itemData.full_title); 

 

        // Render the TreeView with hierarchical data source 

        var data = new ej.data.DataManager({ 

            url: 'https://services.odata.org/V4/Northwind/Northwind.svc', 

            adaptor: new ej.data.ODataV4Adaptor(), 

            crossDomain: true, 

        }); 

        var query = new ej.data.Query().from('Employees').select('EmployeeID,FirstName,Title').take(10); 

        var query1 = new ej.data.Query().from('Orders').select('OrderID,EmployeeID,ShipName').take(10); 

 

        var treeObj = new ej.navigations.TreeView({ 

            fields: { 

                dataSource: data, 

                query: query, 

                id: 'EmployeeID', 

                text: 'FirstName', 

                hasChildren: 'EmployeeID', 

                tooltip: 'Title', 

                child: { dataSource: data, query: query1, id: 'OrderID', parentID: 'EmployeeID', text: 'ShipName' } 

            } 

        }); 

        treeObj.appendTo('#tree'); 

 

    }, 

}); 

 

atcObj1.appendTo('#search-bar'); 

 

 

We Hope the provided solution helps you solve the issue. 

Regards, 

Joseph Christ Nithin I