Click here to Skip to main content
15,311,561 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi!

I am trying to make an autocomplete, but I am stuck, when I start typeing nothing happens. I don't know what I am missing.

My HTML Code:
ASP.NET
<%@ Page Title="Create" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Create.aspx.cs" Inherits="FeladatLap2.ProjectViews.Create"%>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
   <script src="../Scripts/jquery-ui-1.8.20.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var ajaxCall = location.href + "/GetUserList";

            $("#MainContent_txtName").autocomplete({
                minLength: 0,
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        url: ajaxCall,
                        data: JSON.stringify({ 'prefixText': request.term }),
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item,
                                    value: item
                                };
                            }));
                        },
                        error: function (err, status, error) {
                            console.log(status);
                            console.log(error);
                        }
                    });
                }
            });
        });
    </script>
    <h2>Test</h2>
    <div>
        <table>
             <tr>
                <td>
                    Name:</td>
                    <td colspan="3">
                    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                    </td>
            </tr>
            </table>
    </div>
</asp:Content>


My codebehind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using FeladatLap2.Models;
using System.Web.Services;

namespace FeladatLap2.ProjectViews
{
    public partial class Create : System.Web.UI.Page
    {

.....

 [WebMethod]
        public static string[] GetUserList(string prefixText)
        {
            prefixText = prefixText.ToLower();
            List<Users> users = new List<Users>();
            BL.UsersManager usm = new BL.UsersManager();
            users = usm.GetAllUsers();
            var list = users.Where(u => u.Name.ToLower().Contains(prefixText))
                        .Select(u => String.Format("{0} ({1})", u.Name, u.Tsz))
                        .Take(10);

            return list.ToArray();
        } 
    }
}


What I have tried:

I've tried praying, googleing.
Posted
Updated 12-Dec-16 14:03pm
v2

1 solution

So, I changed my Script to this:
JavaScript
<script src="../Scripts/jquery-ui-1.12.1.js"></script>
<script type="text/javascript">
// if you use jQuery, you can load them when dom is read.
$(document).ready(function () {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);

    // Place here the first init of the autocomplete
    InitAutoCompl();
    InitAutoCompl2();
});

    function InitializeRequest(sender, args) {
    }

    function EndRequest(sender, args) {
        // after update occur on UpdatePanel re-init the Autocomplete
        InitAutoCompl();
        InitAutoCompl2();
    }

    function InitAutoCompl() {
        $("#<%=txtName.ClientID %>").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '<%=ResolveUrl("~/ProjectViews/AutoComplete.asmx/GetUsers") %>',
                    data: "prefixText=" + JSON.stringify(request.term),
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item,
                                value: item
                            };
                        }));
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            minLength: 1
        });
    }

And my code in my code in my .asmx:
C#
public class AutoComplete : System.Web.Services.WebService
{
    [WebMethod]
    [ScriptMethod(UseHttpGet = true)]
    public string[] GetUsers(string prefixText)
    {
        prefixText = prefixText.ToLower();
        List<Users> users = new List<Users>();
        BL.UsersManager usm = new BL.UsersManager();
        users = usm.GetAllUsers();
        var list = users.Where(u => u.Name.ToLower().Contains(prefixText))
                    .Select(u => String.Format("{0} ({1}) - {2}", u.Name, u.Tsz, u.OrganizationUnit.OrganizationUnitName))
                    .Take(10);

        return list.ToArray();
    }


I hope it will help others.
   
Comments
Patrice T 12-Dec-16 20:10pm
   
Use Accept answer to close the question.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900