Daily Question

[Aalap Shah]

Hi All,

here is today's puzzle.

I have one app in which i need to show data to user as user types (autocomplete).

e.g. user start typing 'aa' then i want to show its data in a grid/list. As user types more characters i want to show that data to user. just like google search but in google search user have to select from options , here we just get data on user input matches.

Let me know if its not clear. Now the question here is: what is best possible way to achieve this (client, server both) ?

[Nirav Patel]

I think High level , I say you have to use AJAX on both , client and sever side.

--
You received this message because you are subscribed to the Google Groups "Elite Techie Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elite-techie-gr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[BHAVIN SHAH]

There are many different options available to achieve this.. for example using AJAX or JQuery or using simple HTML5 DataList Element. bind your json data (from db or webapi) to html5 DataList element but my this example has hardcoded data...

FYI

http://leaverou.github.io/awesomplete/ 

Also, I have attached html sample (awesomeplate.html) let me know if you find any difficulty while loading. this sample has Bootstrap Grid, awesomplete.css, and HTML5 DataLists as below,

<datalist id="nameList">

 <option>Aalap</option>

      <option>Bhavin</option>

      <option>Jignesh</option>

 <option>Nirav</option>      

    </datalist>

<datalist id="phoneList">

 <option>1234567890</option>

      <option>2345678901</option>

      <option>3456789012</option>

      <option>4567890123</option>

    </datalist>

<datalist id="emailList">

 <option>aa...@abc.com</option>

      <option>bha...@abc.com</option>

      <option>ni...@abc.com</option>

      <option>jig...@abc.com</option>

    </datalist> 

Thanks,

Bhavin Shah

[BHAVIN SHAH]

I have posted my code on GIT. You can download it from this link... 

https://github.com/shahbhavinj/firstGit

Let me know are you able to download it?

[Aalap Shah]

This task seems pretty easy when you look it from top level but i need answers on how you will implement it using multi threading/async (on both client and server)

as there are some restriction from browser to send multiple requests to same server simultaneously also how you will handle those multiple requests and their response (consider ajax and you do not have control of their response time) also how you will handle those on server side ?

Thanks and Regards,
Aalap Shah

--

[BHAVIN SHAH]

By Considering your question still my UI will be the same but i will add controller or WebAPI with HttpGet

[HttpGet]

public async Task<IHttpActionResult> Get(string inputText)

{

return await Task<IHttpActionResult>.Factory.StartNew(() =>

                    {

                        return GetAutocompleteByParam(inputText);

                    });

}

so using async and await method the system will read user input and it will return matching combinations.

My Function GetAutocompleteByParam will get the data from Database using ORM or direct SP..

let me know if you have any other solution for this problem.

Thanks,

Bhavin Shah

To unsubscribe from this group and stop receiving emails from it, send an email to elite-techie-group+unsub...@googlegroups.com.

[Aalap Shah]

This solution is for server side only, as you are using TPL so your server can handle multiple requests and do not block thread

but how about multiple simultaneous requests from client to same server ? how you will handle it ? How you come to know that result you've received is for latest request ?

Thanks and Regards,
Aalap Shah

To unsubscribe from this group and stop receiving emails from it, send an email to elite-techie-gr...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Elite Techie Group" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elite-techie-gr...@googlegroups.com.

[BHAVIN SHAH]

Please receive below console code, and attached output code..

class Program

    {

        static void Main(string[] args)

        {

            while (true)

            {   

                Get(Console.ReadLine().ToString());                

            }

        }

        static async void Get(string s)

        {

            List<string> t = await Task.Run(() => GetAutocompleteByParam(s));

            foreach(var val in t)

            {

                Console.WriteLine("Compute: " + val);

            }            

        }

        static List<string> GetAutocompleteByParam(string s)

        {

            List<string> strList = new List<string>();

            strList.Add("one");

            strList.Add("two");

            strList.Add("three");

            strList.Add("four");

            return strList.Where(str => str.Contains(s)).ToList<string>();

        }

    }

On Monday, March 7, 2016 at 11:20:02 AM UTC-5, Aalap Shah wrote:

[pate...@gmail.com]

Thank you BHAVIN

What he was asking is  how to identify response for the request you submitted..

Here he assume that user action triggers no of requests ( more than one ,may be n ) to server in short time ,how the callback method attach response to proper request ?

Sent from my iPhone

--

You received this message because you are subscribed to the Google Groups "Elite Techie Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elite-techie-gr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

<Capture.PNG>

[Aalap Shah]

Also i assume client is browser/http request not console/c# application.

Thanks and Regards,
Aalap Shah

[SHAH BHAVIN]

Yes, I know it is for browser just gave the example that this kind of code it can be implemented at ther server side for the client/server application.

I have no other idea to implement it.

Thanks,
Bhavin

You received this message because you are subscribed to a topic in the Google Groups "Elite Techie Group" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/elite-techie-group/akJOB87LijM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to elite-techie-gr...@googlegroups.com.

[Jignesh Gor]

Jsonp protocol...for attaching callback function with each request

[Jignesh Gor]

Ofcourse....before binding..there will be check...Whether request Test is same as element value...

[Jignesh Gor]

i meant "Text"...not Test :-)

--

Thanks & Regards,
Jignesh Gor

[Jignesh Gor]

Also, need to use CancellationTokenSource to cancel the async thread process if request text changes before response...

[Jignesh Gor]

Javascript version of CancellationTokenSource...we can achieve using Promises....

Bhavin, our entire app was based on same concept...in fact AngularJS or other js frameworks implement same concept...by passing resolve and reject expression functions....

http://stackoverflow.com/questions/32897385/abort-ecmascript7-async-function

Nirav, what do u say?...

Aalap, nice start...

Bhavin, nice enthu...!!!

[Aalap Shah]

Exactly, Promise is the best answer to this but here your approach is to cancel the current request before you start new one

yet i wanted to send multiple requests and then show results whichever comes first and cancel earlier ones, that might be achieved through array of requests though which might not be best solution.

thank you bhavin for code snippet and thank you jignesh for filling up on client side implementation of CancellationTokenSource.

Thanks and Regards,
Aalap Shah

[pate...@gmail.com]

Question for today ?????

Sent from my iPhone