Hi Team - We have a requirement in AngularJS to implement input text box having autocomplete on text change event with multiple select feature. Can you recommend ways to do it either in angularjs or jquery with which doesn't hamper performance.
According to your description, as far as I know, jQuery UI provide the Autocomplete method, please check the following sample, in this sample, you could get the availableTags values from database in jQuery AJAX.
Disclaimer: This response contains a reference to a third party World Wide Web site. Microsoft is providing this information as a convenience to you. Microsoft does not control these sites and has not tested any software or information found on these sites;
therefore, Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. There are inherent dangers in the use of any software found on the Internet, and Microsoft cautions you to make sure
that you completely understand the risk before retrieving any software from the Internet.
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
None
0 Points
3 Posts
Require input text with autocomplete on change and have multiple select features
Jun 09, 2017 04:46 PM|sudeep9|LINK
Hi Team - We have a requirement in AngularJS to implement input text box having autocomplete on text change event with multiple select feature. Can you recommend ways to do it either in angularjs or jquery with which doesn't hamper performance.
Contributor
6680 Points
2715 Posts
Re: Require input text with autocomplete on change and have multiple select features
Jun 12, 2017 02:32 AM|Eric Du|LINK
Hi sudeep9,
According to your description, as far as I know, jQuery UI provide the Autocomplete method, please check the following sample, in this sample, you could get the availableTags values from database in jQuery AJAX.
Sample Code:
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Autocomplete</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function () { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $("#tags").autocomplete({ source: availableTags }); }); </script> </head> <body> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags"> </div> </body>For more details, please check the detailed document:
jQuery-UI Autocomplete:
https://jqueryui.com/autocomplete/
Please refer to this sample about how to get array from web service or web method in jQuery AJAX.
Handling JSON Arrays returned from ASP.NET Web Services with jQuery:
https://www.mikesdotnetting.com/article/96/handling-json-arrays-returned-from-asp-net-web-services-with-jquery
Best Regards,
Eric Du
Disclaimer: This response contains a reference to a third party World Wide Web site. Microsoft is providing this information as a convenience to you. Microsoft does not control these sites and has not tested any software or information found on these sites; therefore, Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. There are inherent dangers in the use of any software found on the Internet, and Microsoft cautions you to make sure that you completely understand the risk before retrieving any software from the Internet.
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.