I forum Ricerca FAQ
Fai una domanda
Ultimo messaggio 1 2
diego78
diego78
il 19 settembre 2013 alle 10:50
701 messaggi dal 18 febbraio 2002
www.dimsolutions.it
Salve a tutti,
dovrei implementare una textbox con autocomplete con i dati presi da una tabella del db.

Non sono molto pratico di JQuery.

Ho provato questo esempio fornito da JQuery con un array e funziona correttamente:
http://jqueryui.com/autocomplete/#default

Ho cercato di adattare al mio scopo lo script di cui sopra, ho creato un handler per prelevare i dati dal db:

public class AutocompleteData : IHttpHandler
{

private readonly DimCms.Web.Data.database _database = new DimCms.Web.Data.database();

protected DimCms.Web.Data.database db
{
get { return _database; }
}

public void ProcessRequest(HttpContext context)
{
string firstname = context.Request.QueryString["q"];
string sql = "select titolo from articoli where titolo like '" + firstname + "%' LIMIT 10";

using (MySqlDataReader reader = db.executeSQLDataReaderDr(sql))
{
while (reader.Read())
{
context.Response.Write(reader.GetString(0) + Environment.NewLine);
}
}

}


sulla pagina ASPX:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$("#tags").autocomplete("AutocompleteData.ashx");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</form>
</body>
</html>

ma niente da fare.. mi ritorna l'errore che non capisco a cosa faccia riferimento:
"cannot call methods on autocomplete prior to initialization; attempted to call method 'AutocompleteData.ashx'"

come devo effettuare questa chiamata a AutocompleteData.ashx?
RispondiQuoting
Biohazard
Biohazard
il 19 settembre 2013 alle 14:37
103 messaggi dal 04 ottobre 2010
Qui, puoi vedere la variante del metodo autocomplete che supporta la chiamata ajax:
http://jqueryui.com/autocomplete/#remote-jsonp
Come puoi vedere il source può essere una funzione dove troverai:
-request -> oggetto con una proprietà, term, la quale ha l'attuale valore del'input in autocomplete
-response -> oggetto che rappresenta la risposta e che ha la proprietà data dove si memorizza il contenuto della stessa.

Praticamente sono due parametri che si valorizzano, il primo ancor prima di chiamare l'handler (così tu gli passi all'handler le lettere digitate), ed il secondo dopo l'elaborazione del render e lo usa nella success per prendere il campo data, riscrivendo ogni oggetto dell'array con la funzione map, facendo così in modo che la success risponda con un array di oggetti formati da label e value (che autocomplete userà poi per valorizzare l'input e la lista dei valori possibili).
Per saperne di più:
api.jqueryui.com/autocomplete/
Modificato da Biohazard il 19 settembre 2013 13.38 -
RispondiQuoting
diego78
diego78
il 19 settembre 2013 alle 14:49
701 messaggi dal 18 febbraio 2002
www.dimsolutions.it
Grazie, proverò l'esempio che mi hai postato.
adattandolo al mio caso questi due parametri come sarebbero:

url: "AutocompleteData.ashx",
dataType: "jsonp",

secondo te così è corretto?
in che modo passo il parametro di ricerca sul file ashx?

Per il mio caso forse non è più semplice questo?
http://jqueryui.com/autocomplete/#remote

grazie
Modificato da diego78 il 19 settembre 2013 14.51 -
RispondiQuoting
Biohazard
Biohazard
il 19 settembre 2013 alle 15:10
103 messaggi dal 04 ottobre 2010
Dato che l'handler si ritrova nello stesso dominio, credo che il datatype sia meglio impostarlo a json invece che a jsonp, il secondo serve per la comunicazione di json che altrimenti violerebbero le regole "same-domain" e "same-origin".
PS: il secondo link serve soltanto a conoscere l'autocomplete nella sua interezza, lì trovi le spiegazioni del remote e response che non ci stanno nel primo link.
Modificato da Biohazard il 19 settembre 2013 14.11 -
RispondiQuoting
diego78
diego78
il 19 settembre 2013 alle 17:52
701 messaggi dal 18 febbraio 2002
www.dimsolutions.it
ho provato questo:
http://jqueryui.com/autocomplete/#remote-jsonp

la chiamata al mio ASHX viene fatta ma poi non ottengo il ritorno con la tendina dei risultati. devo deserializzare in qualche modo nel formato json i dati ricavati della query all'interno dell'ASHX?

public void ProcessRequest(HttpContext context)
{
string firstname = context.Request.QueryString["q"];
string sql = "select titolo from articoli where titolo like '" + firstname + "%' LIMIT 10";

using (MySqlDataReader reader = db.executeSQLDataReaderDr(sql))
{
while (reader.Read())
{
context.Response.Write(reader.GetString(0) + Environment.NewLine);
}
}

}
RispondiQuoting
diego78
diego78
il 20 settembre 2013 alle 10:14
701 messaggi dal 18 febbraio 2002
www.dimsolutions.it
Ho fatto qualche passo avanti, ma non ho ancora risolto, appena digito nella casella 2 lettere mi va sulla funzione error e mi restituisce un parserror ma non riesco a capire il perché.

di seguito il codice:

<script>

$(function () {

$("#city").autocomplete({

source: function (request, response) {

$.ajax({

url: "method.aspx/GetPays",
dataType: "json",
data: { msg: request.term },

success: function (data) {

var datafromServer = data.d.split(":");

$("#city").autocomplete({
source: datafromServer
});

},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}

});

}

});

});

</script>

<div class="ui-widget">
<label for="city">Your city: </label>
<input id="city" />
Powered by geonames.org
</div>
<div class="ui-widget" style="margin-top: 2em; font-family: Arial;">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

[System.Web.Services.WebMethod]
public static string GetPays(string msg)
{
return "ALABAMA:ALASKA:AMERICAN SAMOA:ARIZONA:ARKANSAS:CALIFORNIA:COLORADO:CONNECTICUT:DELAWARE:DISTRICT OF COLUMBIA";
}
RispondiQuoting
Biohazard
Biohazard
il 20 settembre 2013 alle 17:23
103 messaggi dal 04 ottobre 2010
Se alla chiamata ajax dichiari un datatype JSON, jQuery si aspetterà un JSON dal server. Quindi, senza parsarti a mano il risultato con lo split, dovrai predisporre il server ad una risposta che sia un array di dati (preferibilmente un array di oggetti con proprietà 'label' e proprietà 'value'), quindi dovrà tornare una stringa di questo tipo:

return "[{'label':'ALABAMA', 'value':1},{'label':'ALASKA', 'value':2}......................]";

Se includi la libreria System.Web.Serialization, puoi anche ottenere questa stringa da un array di oggetti C# che abbiano proprietà label e value. Supponendo che hai un array di nazioni rappresentate da un oggetto con id e descrizione, usando Linq ed i tipi anonimi:

List<Nazione> nazioni = GetNazioni();
var NazioniDaSerializzare= nazioni.Select(n=>new {label=n.descrizione, value=n.id}).ToArray();
return new JavascriptSerializer().Serialize(NazioniDaSerializzare);

Non mi ricordo se il ToArray() è sia necessario, ma "a pelle" preferisco passargli qualcosa di più "concreto" rispetto ad un IEnumerable (ma magari avrebbe funzionato lo stesso e sarebbe stato anche più prestante).
Modificato da Biohazard il 20 settembre 2013 16.24 -
RispondiQuoting
diego78
diego78
il 20 settembre 2013 alle 19:56
701 messaggi dal 18 febbraio 2002
www.dimsolutions.it
grazie, puoi scrivermi l'esempio di codice che mi hai riportato in linq in c# normale? non sono molto pratico di linq
RispondiQuoting
1 2

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.