How to make AutoComplete control (JQeryUI) working?

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

LVL 6
viola123Asked:
Who is Participating?
Advertise Here
 
Ramkisan JagtapConnect With a Mentor Lead DeveloperCommented:
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
 
Gurvinder Pal SinghCommented:
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
 
viola123Author Commented:
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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Access It Now
 
Gurvinder Pal SinghConnect With a Mentor Commented:
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
 
viola123Author Commented:
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
 
Ramkisan JagtapLead DeveloperCommented:
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
 
viola123Author Commented:
ramkisan:
then how can i call it? like the following?
<script type="text/javascript">
        $(function () {
           
            $("#tbComm").autocomplete({

                source: '<%= "GetCommentary" %>'
            });
        });
      </script>
0
 
viola123Author Commented:
ramkisan:
thanks, i will have a look at those websites and back to you.

thanks a lot
0
 
Gurvinder Pal SinghConnect With a Mentor Commented:
<<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
 
viola123Author Commented:
gurvinder372:
thanks for your suggestion. i will have a look at how to do it by using webservice call.

thanks a lot
0
 
Gurvinder Pal SinghConnect With a Mentor Commented:
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
 
viola123Author Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.