At.js @mention - C# Web API

Question

I am using https://github.com/ichord/At.js library to achieve autocomplete.

But it shows a list of "undefined" dropdown when I am using remoteFilter like they said in https://github.com/ichord/At.js/wiki/How-to-use-remoteFilter .

Model:

public class CaseHistory
{
    public int CaseHistoryId { get; set; }


    [Display(Name = "Symptom/Disease")]
    [Required(ErrorMessage = "Please enter symptom or disease")]
    public string SymptomOrDisease { get; set; }

    public string Description { get; set; }

}

API action code:

   private ApplicationDbContext db = new ApplicationDbContext();

    // GET api/CaseHistories
    public IQueryable<CaseHistory> GetCaseHistories()
    {
        return db.CaseHistories;
    }

Here is my code in the razor view:

    var myUrl = 'https://localhost:44301/api/CaseHistories';

    $('#inputor').atwho({
    at: ":",
    callbacks: {
        /*
         It function is given, At.js will invoke it if local filter can not find any data
         query [String] matched query
         callback [Function] callback to render page.
        */
        remoteFilter: function(query, callback) {
            $.getJSON(myUrl, { q: query }, function (data) {
                callback(data);
            });
        }
    }
    });

Please share the Api action code – zaitsman Mar 12 '17 at 02:15 — zaitsman, Mar 12 '17 at 02:15
@zaitsman I have added Api action code. – InsParbo Mar 12 '17 at 08:02 — InsParbo, Mar 12 '17 at 08:02

zaitsman · Accepted Answer · 2017-03-12T08:21:58.793

0

Change the code in the controller to be:

   public dynamic GetCaseHistories()
    {
        return db.CaseHistories.Select(x => x.SymptomOrDisease).ToList();
    }

The issue is that the parameter you pass to callback should be array of strings.

If you really wanted to do this in js:

    var myUrl = 'https://localhost:44301/api/CaseHistories';

    $('#inputor').atwho({
    at: ":",
    callbacks: {
        /*
         It function is given, At.js will invoke it if local filter can not find any data
         query [String] matched query
         callback [Function] callback to render page.
        */
        remoteFilter: function(query, callback) {
            $.getJSON(myUrl, { q: query }, function (data) {
            var targetData = [];
                for(var i = 0;i < data.length;i++){
                        targetData.push(data[i].SymptomOrDisease);
                }
                callback(targetData);
            });
        }
    }
    });

edited Mar 12 '17 at 08:21

answered Mar 12 '17 at 08:09

zaitsman

8,984
6
47
79

Is there any way to achieve this using jquery in the view without changing the controller? – InsParbo Mar 12 '17 at 08:18
See the updated to the answer. however, this is really not so efficient as you are effectively selecting data from db that you will then discard. – zaitsman Mar 12 '17 at 08:22
I see. Then I will go for selecting data for db option. One more thing, when I am using 'api/CaseHistories' as myUrl, the url becomes https://localhost:44301/Prescriptions/Create. Here prescription is the controller for current view[this view above] How can I pass only api/CaseHistories as the url without using full url like in the code above? – InsParbo Mar 12 '17 at 09:03
you should be able to simply use `var myUrl = '/api/CaseHistories';` that would ask for the api at the root of the host the user is viewing the page on – zaitsman Mar 12 '17 at 09:08

At.js @mention - C# Web API

1 Answers1