1

私のデータベーステーブルTAGS(TagId、TagName)私のWebメソッドコードは次のとおりです

 public List<Tag> FetchTagList(string tag)
{
    OleDbConnection cn = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=\"|DataDirectory|\\ImageDB2.mdb\";Persist Security Info=True");
    DataSet ds = new DataSet();
    DataTable dt = new DataTable();
    string query = "select * from TAGS Where TagName like '@myParameter'";
    OleDbCommand cmd = new OleDbCommand(query,cn);
    cmd.Parameters.AddWithValue("@myParameter", "%" + tag + "%");
    try
    {
        cn.Open();
        cmd.ExecuteNonQuery();
        OleDbDataAdapter da = new OleDbDataAdapter(cmd);
        da.Fill(ds);
    }
    catch(OleDbException excp)
    {

    }
    finally
    {
        cn.Close();
    }
    dt = ds.Tables[0];

    List<Tag> Items = new List<Tag>();

    Tag obj;

    foreach (DataRow row in dt.Rows)
    {
        obj = new Tag();
        //String From DataBase(dbValues)
        obj.TagName = row["TagName"].ToString();
        obj.ID = Convert.ToInt32(row["TagId"].ToString());

        Items.Add(obj);
    }
    return Items;
} 

}

私はクラスを使いました

public class Tag {public int ID {get; セットする; } public string TagName {get; セットする; }}

私のJavaScriptコードは

<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="jsautocom/jquery.min.js" type="text/javascript"></script>
<script src="jsautocom/jquery-ui.min.js" type="text/javascript"></script><script type="text/javascript">
        $(function () {
            $(".tb").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "WebService.asmx/FetchTagList",
                        data: "{ 'tag': '" + 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.TagName
                                }
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                },
                minLength: 1
            });
        });
    </script>

私のaspxページは次のようなものです

<div class="demo">
    <div class="ui-widget">
        <label for="tbAuto">Search Tag: </label>
          <asp:TextBox ID="TextBox1" class="tb" runat="server" ontextchanged="TextBox1_TextChanged"></asp:TextBox>
          <asp:Button ID="btnSearch" runat="server" CssClass="btnSearch" 
    onclick="btnSearch_Click" Text="Search"  />
    </div>
</div>

しかし、私は何も得られません。それを解決する方法。誰もが私を助けてくれて大いに感謝しています。事前に感謝します。

4

5 に答える 5

2

以下に示すように、ajaxのデータと応答を変更するだけです

data: "{'PhoneContactName':'" + document.getElementById("<%= ContactName.ClientID %>").value + "'}",

dataType: "json",

success: function (data) {
    response(data.d);
},

error: function (result) {
    alert("Error");
}

あなたの場合、PhoneContactNameをタグなどのように変更します。

これがお役に立てば幸いです:D

于 2012-10-23T10:23:48.017 に答える
1

ここで注意すべきことが2つあります。

A-サービスメソッドを呼び出せることを確認してください。関数で[WebMethod]属性を使用して、httpで呼び出せるようにします。また、WebServiceの設定を少し調整して、機能させる必要がある場合もあります。

B-あなたのJavaScriptコードはこのタスクには多すぎます。オートコンプリートの公式ドキュメントに書かれていることを考えると、2つのことを指摘するだけで済みます。

  1. フェッチメソッドのURL、
  2. ユーザーが書き込むコントロールであり、内部の現在の値を使用してオートコンプリート呼び出しをトリガーします。

次の例を考えてみましょう。

$(".tb").autocomplete({source: "URL_OF_YOUR_REMOTE_METHOD"});

あなたの例を考えると、あなたはこのコードを置く必要があるでしょう:

$(".tb").autocomplete({source: "WebService.asmx/FetchTagList"});

これは、機能させるために必要な最小限のコードです。しかし、すべてを手動で行うのは少し複雑で、問題が発生し始めたらそれを理解するのはそれほど簡単ではありません。

実例: http: //jsfiddle.net/grtWe/1/

このコードを使用して、それが機能するかどうかを知らせてください。そうすれば、ここから目標を達成することができます。

于 2012-10-23T10:22:38.487 に答える
1

FetchTagListがjqueryから呼び出しているWebメソッドである場合は、メソッドからリストを返さないでください。データテーブルをオートコンプリートテキストボックスに直接バインドできます。その方法については、次のリンクを確認してください。

http://nareshkamuni.blogspot.in/2012/06/sample-example-of-jquery-autocomplete.html

また、ajaxオートコンプリートエクステンダーを使用してこれを行うこともできます。ajaxオートコンプリートエクステンダーの使用については、次のリンクを参照してください

http://www.aspsnippets.com/Articles/ASPNet-AJAX-AutoCompleteExtender-Pass-Additional-Parameter-to-WebMethod-using-ContextKey.aspx

于 2012-10-23T10:36:22.817 に答える
0

スクリプトは次のとおりです。

<script type="text/javascript">
    $(document).ready(function () {
        SearchText();

    });
    function SearchText() {
        $(".auto").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Photos.aspx/GetAutoCompleteData",
                    data: "{'CategoryName':'" + document.getElementById("<%= txtCategory.ClientID %>").value + "'}",
                    dataType: "json",
                    success: function (data) {
                        response(data.d);
                    },
                    error: function (result) {
                        alert("Error Occurred");
                    }
                });
            }
        });


    }
            </script>

Webメソッド:

[WebMethod]

public static List<string> GetAutoCompleteData(string CategoryName)
{
    List<string> result = new List<string>();
    OleDbConnection con = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=\"|DataDirectory|\\ImageDB2.mdb\";Persist Security Info=True");
    string query = "select TagName from TAGS where TagName LIKE '%" + CategoryName + "%'";
    OleDbCommand cmd = new OleDbCommand(query, con);
    con.Open();
    //cmd.Parameters.Add("@ptext", System.Data.SqlDbType.NVarChar).Value = CategoryName;
    OleDbDataReader dr = cmd.ExecuteReader();
    while (dr.Read())
    {
        result.Add(dr["TagName"].ToString());
    }
    return result;


}
于 2013-10-01T07:44:48.397 に答える
0

C#コード

ここで覚えておく必要があるのは、手動で作成できないJsonデータ、JavaScriptSerializerクラスを使用して作成することです。

<%@ WebHandler Language="C#" Class="CountryStateCityHandler" %>

using System;
using System.Web;
using System.Data;
using System.Collections.Generic;

public class CountryStateCityHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
if (context.Request.QueryString["action"] != null)
{
string strCallbackFunf = string.Empty;

if (context.Request.QueryString["callback"] != null)
{
strCallbackFunf = Convert.ToString(context.Request.QueryString["callback"]).Trim();
}

if (context.Request.QueryString["action"] == "getcountry")
{                   
DataTable dt = GetDataTable("EXEC PR_GetCountries"); //GetDataTable need to write, this method will call the Database and get the result
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary<string, object>();
foreach (DataColumn col in dt.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
rows.Add(row);
}

context.Response.ContentType = "text/plain";
if (string.IsNullOrEmpty(strCallbackFunf))
{
context.Response.Write(serializer.Serialize(rows));
}
else
{
context.Response.Write(strCallbackFunf+"("+serializer.Serialize(rows)+");");      
}
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}

//HTMLCODEまたは.aspxコードとスクリプトを添付する必要があります。

<html>
<head>
<script src="../scripts/jquery-1.7.js"></script>
<link href="../scripts/jqueryui/development-bundle/themes/smoothness/minified/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../scripts/jqueryui/js/jquery-ui-1.10.4.custom.min.js"></script>
<link href="../scripts/jqueryui/development-bundle/demos/demos.css" rel="stylesheet"  type="text/css" />
<script language="JavaScript" type="text/javascript">     

    var CountriesTags; //Local variable to store json object

    $(function () {
        $("#lnkCountry")
          .attr("tabIndex", -1)
          .attr("title", "Show All Items")
          .button({
              icons: {
                  primary: "ui-icon-triangle-1-s"
              },
              text: false
          })
          .removeClass("ui-corner-all")
          .addClass("custom-combobox-toggle ui-corner-right")
          .click(function () {              
              var wasOpen = $("#Country").autocomplete("widget").is(":visible");
              $("#Country").autocomplete("widget").css("display", "none");
              if (wasOpen) {
                  $("#Country").autocomplete("widget").css("display", "none");
                  return;
              }
              // Pass empty string as value to search for, displaying all results
              $("#Country").autocomplete("search", "");
          }); 

        $("#Country").autocomplete({
            source: function( request, response) {
                var matcher = new RegExp("(^| )" + $.ui.autocomplete.escapeRegex(request.term), "i");
                response($.grep(CountriesTags, function (item) {
                    return matcher.test(item.label);
                }));
            },
            minLength: 0,
            select: function (event, ui) {
                var sv = ui.item.label;
                var res = $.grep(CountriesTags, function (e, i) {
                    return e.label == sv;
                });
                if (res.length == 0) {                    
                    this.value = "";
                    $("#CountryID").val("");
                    alert(sv + " country is not available in database.");
                }
                else {
                    $("#CountryID").val(res[0].id);
                }
            },
            change: function (event, ui) {
                var sv = this.value;
                var res = $.grep(CountriesTags, function (e, i) {
                    return e.label == sv;
                });
                if (res.length == 0) {                    
                    this.value = "";
                    $("#CountryID").val("");
                    alert(sv + " country is not available in database.");
                }
                else {
                    $("#CountryID").val(res[0].id);
                }
            },
        });
        LoadCountry();
    }

    //html inputs Value are country id (<%=CountryID %>) and country name (<%=Country%>)
    function LoadCountry() {
        $.ajax({
            url: "CountryStateCityHandler.ashx?action=getcountry",
            dataType: "jsonp",
            type: 'GET',
            async: false,
            success: function (data) {
                CountriesTags = data;
                //array of Json Object will return
                //label, value and id are keys
                //Example  id:219 label:"United States" value:"United States"
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status + ' - Method: Loading countries - ' + thrownError);
            }
        });
    }
</script>
</head>

<body>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
    <td>        
        <input type="text" name="Country" id="Country" maxlength="50" size="20" class="TextBox" value="<%=Country%>" /> 
        <input type="hidden" id="CountryID"  name="CountryID"  value="<%=CountryID %>">
    </td>
    <td>
        <a style="height: 16px" id="lnkCountry"></a>
    </td>                                                
</tr>

</table>

</body>

</html>
于 2017-02-17T09:42:55.200 に答える