[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

How to make AutoComplete control (JQeryUI) working?

Posted on 2011-09-21
12
Medium Priority
?
426 Views
Last Modified: 2012-05-12
Hi all,
i try to use autocomplete control of JQueryUI in my web form. i want to use a server side method to pass source to autocomplete. but dont know how to do it? i did research and found i may need to use web service. i am wondering whether there are ways i can pass source to Autocomplete without using webservice? or i have to use webservice?

attached the code, pls have a look.

thanks heaps
<head runat="server">
    <title>Stock Commentary</title>
	<link href="../../../templates/styles.css" type="text/css" rel="stylesheet" />
    <script src="../../../templates/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>    
    <script src="../../../templates/jquery/jquery.ui.js" type="text/javascript"></script>   
    
    <script type="text/javascript">
        $(function () {
            
            $("#tbComm").autocomplete({
***How to pass a method to this Source? eg: source:'<%= "GetMysSource" %>'
                source: '<%= "xxx" %>'
            });
        });
	</script>

</head>
<body>
    <form id="form1" runat="server">
    <div class="text_header">Commentary</div>
		<br>
		<table cellpadding="3" cellspacing="0" border="0" id="tblComment">
			
			<tr>
				<td class="text_title"> 				
                    <div class="ui-widget">
                        <label for="tbComm">Comments: </label>
                        <asp:TextBox ID="tbComm" class="tb" runat="server" TextMode="MultiLine">
                        </asp:TextBox>
                        

                    </div>
                </td>
				
			</tr>
            <tr>
                <td colspan="2"><asp:Button id="btnSave" runat="server" Text="Save" CssClass="button_item"></asp:Button>
                    <asp:Button id="btnClose" runat="server" Text="Close" CssClass="button_item"></asp:Button>
                </td>
            </tr>
		</table>
    </form>
</body>

*********************************
protected void Page_Load(object sender, EventArgs e)
    {
//Can i use this JavaScriptSerializer? but i cannot get it working. if it works, then i can pass it to client side by using -- source: <%= Values %>. Am i right?
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        Values = serializer.Serialize(GetCommentary);

    }
//this is the method i try to use to provide source for autocomplete
public List<string> GetCommentary()
    {
        List<string> lstComm = new List<string>();
        lstComm.Add("this is test 1");
        lstComm.Add("this is test 2");
        lstComm.Add("i am test 1");

        return lstComm; 
    }

Open in new window

0
Comment
Question by:viola123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 2
12 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36578142
if you just click on the 'view source' on this page
http://jqueryui.com/demos/autocomplete/

you will see the example where the source is not from ajax response
0
 
LVL 6

Author Comment

by:viola123
ID: 36578350
hi gurvinder372,
i had look at the source of it, yes, it is not from ajax response. do you have any idea about the questions i asked above?

thanks
0
 
LVL 40

Assisted Solution

by:Gurvinder Pal Singh
Gurvinder Pal Singh earned 800 total points
ID: 36578371
Question you have asked is, whether it is mandatory for you to use web-service or not, right?

to which i have responded by showing an example where it is possible to use that plugin without web-service calling. So it means that, it is not mandatory to use web-service.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Author Comment

by:viola123
ID: 36578416
gurvinder372:
i want to get source from Database, i cannot just create a fixed array in javascript and pass it to Autocomplete. i am wondering how to pass source from database to autocomplete by using websevice or other ways? is there any sample code?

thanks
0
 
LVL 12

Expert Comment

by:Ramkisan Jagtap
ID: 36578430
Hi,
You don't needed to write a webservice for it.
just make you method on page as WebMethod

[WebMethod]
public List<string> GetCommentary()
    {
        List<string> lstComm = new List<string>();
        lstComm.Add("this is test 1");
        lstComm.Add("this is test 2");
        lstComm.Add("i am test 1");

        return lstComm;
    }

Regards,
Ram
0
 
LVL 6

Author Comment

by:viola123
ID: 36578455
ramkisan:
then how can i call it? like the following?
<script type="text/javascript">
        $(function () {
           
            $("#tbComm").autocomplete({

                source: '<%= "GetCommentary" %>'
            });
        });
      </script>
0
 
LVL 12

Accepted Solution

by:
Ramkisan Jagtap earned 1200 total points
ID: 36578508
Hi viola123,
I am sorry but you need to write a webservice for implementing JQueryUi Autocomplete in Asp.Net.
Please find the samples below.
http://www.dotnetcurry.com/ShowArticle.aspx?ID=515
http://www.codeproject.com/KB/aspnet/Jquery_Autocomplete.aspx
http://forums.asp.net/t/1496920.aspx/1

Regards,
Ram
0
 
LVL 6

Author Comment

by:viola123
ID: 36578594
ramkisan:
thanks, i will have a look at those websites and back to you.

thanks a lot
0
 
LVL 40

Assisted Solution

by:Gurvinder Pal Singh
Gurvinder Pal Singh earned 800 total points
ID: 36578608
<<i want to get source from Database,>>
In that case, you need to fetch the info from the server. You can either do it via an ajax call to you servlet (or whatever server side script you are using) or by calling a web-service call.


0
 
LVL 6

Author Comment

by:viola123
ID: 36578747
gurvinder372:
thanks for your suggestion. i will have a look at how to do it by using webservice call.

thanks a lot
0
 
LVL 40

Assisted Solution

by:Gurvinder Pal Singh
Gurvinder Pal Singh earned 800 total points
ID: 36578758
You will make an ajax call at the EPR (end point reference), which will give response as XML, which you will parse and get the data
0
 
LVL 6

Author Comment

by:viola123
ID: 36584593
Hi all,
thanks a lot. i figured out how to use web service to pass source to Autocomplete.

attached the final solution.

thanks heaps
viola
<script type="text/javascript">
        $(function () {
            
            $("#tbComm").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "GetSource.asmx/FetchStockCommentary",
                        data: "{'comm': '" + request.term + "' }",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function (data) { return data; },
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    value: item
                                }
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                }
            });
        });
	</script>

***********************************
using System.Web.Script.Services;

/// <summary>
/// Summary description for GetSource
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[ScriptService]
public class GetSource : System.Web.Services.WebService {

    public GetSource () {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [WebMethod]
    public List<string> FetchStockCommentary(string comm)
    {
        var fetchComm = GetStockCommentary()
        .Where(m => m.ToLower().StartsWith(comm.ToLower()));
        return fetchComm.ToList();
    }

    private List<string> GetStockCommentary()
    {
        List<string> lstComm = new List<string>();
        lstComm.Add("this is test 1");
        lstComm.Add("this is test 2");
        lstComm.Add("i am test 1");

        return lstComm;
    }

Open in new window

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question