mboost-dp1
JavaScript onchange
Jeg er ved at lave en form for søgefunktion der kan begrænse valgmulighederne i en select efter hvad man skriver i en tekstboks.
Det er meningen at det skal fungere på samme måder som de indekserede søgninger i Windows eller Mac, dvs. at filtreringen sker så snart brugeren skriver et tegn.
Til det troede jeg at JavaScript eventen "onchange" kunne bruges, da det er det der er formålet med sådan en event i de fleste andre programmeringssprog jeg har prøvet, men i JavaScript bliver den tilsyneladende først kørt når tekstboksen mister sit fokus.
Er der en anden event der passer bedre til mit formål, eller er der en anden måde man kan gøre det på?
Det er meningen at det skal fungere på samme måder som de indekserede søgninger i Windows eller Mac, dvs. at filtreringen sker så snart brugeren skriver et tegn.
Til det troede jeg at JavaScript eventen "onchange" kunne bruges, da det er det der er formålet med sådan en event i de fleste andre programmeringssprog jeg har prøvet, men i JavaScript bliver den tilsyneladende først kørt når tekstboksen mister sit fokus.
Er der en anden event der passer bedre til mit formål, eller er der en anden måde man kan gøre det på?
#2:
Jeg skal bare gøre det der er nemmest så længe jeg ikke vil komme til at bryde nogle licenser, og så skal det helst virke i de fleste browsere.
Har du et bud på noget jeg bør lede efter?
Jeg laver siden i ASP.NET med Visual Studio hvis det gør en forskel.
Jeg skal bare gøre det der er nemmest så længe jeg ikke vil komme til at bryde nogle licenser, og så skal det helst virke i de fleste browsere.
Har du et bud på noget jeg bør lede efter?
Jeg laver siden i ASP.NET med Visual Studio hvis det gør en forskel.
<script type="text/javascript" src="media/layout/jquery/jquery.js"></script>
<script type="text/javascript" src="media/layout/jquery/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="media/layout/jquery/jquery.ajaxQueue.js"></script>
<script type="text/javascript" src="media/layout/jquery/thickbox-compressed.js"></script>
<link rel="stylesheet" type="text/css" href="media/layout/jquery/thickbox.css" />
<script type="text/javascript" src="media/layout/jquery.autocomplete.min.js"></script>
<link rel="stylesheet" type="text/css" href="media/layout/jquery.autocomplete.css" />
<script type="text/javascript">
$().ready(function()
{
$("#ctl00_Contents_txtTags").autocomplete('../Tags.ashx',
{
width: 300,
multiple: true,
matchContains: true
});
});
</script>
...
<asp:TextBox Width="300" ID="txtTags" runat="server" />
...
Og den ASHX service jeg benytter til at hente mine "Tags" til min autocomplete box fra, som outputter i Json.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using Homepage.Data;
using Newtonsoft.Json;
namespace Homepage
{
public class JsonTag
{
public int Id { get; set; }
public string Name { get; set; }
}
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class TagService : IHttpHandler
{
BlogDataContext db = new BlogDataContext();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
if(context.Request["q"] != null)
{
var query = context.Request["q"];
var tags = from t in db.BlogTags orderby t.TagName.CompareTo(query) descending select t;
foreach(var tag in tags)
{
context.Response.Write(tag.TagName + Environment.NewLine);
}
}
context.Response.Write(" ");
}
public bool IsReusable
{
get
{
return true;
}
}
}
}
Libs:
JQuery: http://jquery.com/
Newtonsoft.Json (JSON for C#): http://james.newtonking.com/pages/json-net.aspx
---
Det var meget direkt sakset, men jeg håber det kan give nogle ideer til hvordan du kommer i gang :)
Eksempel på hvordan det virker for mig: http://clausjoergensen.dk/media/files/eksempeltile...
JQuery: http://jquery.com/
Newtonsoft.Json (JSON for C#): http://james.newtonking.com/pages/json-net.aspx
---
Det var meget direkt sakset, men jeg håber det kan give nogle ideer til hvordan du kommer i gang :)
Eksempel på hvordan det virker for mig: http://clausjoergensen.dk/media/files/eksempeltile...
Og så glemte jeg at linke det vigtigste, det JQuery plugin du skal bruge: http://bassistance.de/jquery-plugins/jquery-plugin...
Og et par eksempler på tricks med Visual Studio og JQuery!
- http://clausjoergensen.dk/media/files/jquery.png
- http://clausjoergensen.dk/media/files/visualstudio...
- http://clausjoergensen.dk/media/files/autocomplete... (Manuelt dokumenteret)
Og et par eksempler på tricks med Visual Studio og JQuery!
- http://clausjoergensen.dk/media/files/jquery.png
- http://clausjoergensen.dk/media/files/visualstudio...
- http://clausjoergensen.dk/media/files/autocomplete... (Manuelt dokumenteret)
Mange tak for svarene.
windcape:
Jeg tror du har misforstået mit spørgsmål lidt.
Formålet er ikke at hjælpe brugeren med at skrive det rigtige i tekstfeltet, men at hjælpe ham med at vælge det rigtige i listbox'en (hvor det er muligt at vælge mere end én ting).
Jeg har lavet en demo i Delphi af hvordan jeg havde tænkt mig at det skulle være: http://fyrrevang.dk/filterdemo.exe
Det var en god idé at køre det på onkeyup (onkeydown og onkeypress ser ud til at blive kørt før værdien af tekstboksen bliver ændret).
Det eneste jeg lige kan se at det ikke fanger, er når brugeren højreklikker på feltet og vælger Indsæt/Sæt ind (for at paste tekst). Er der en event der fanger det?
windcape:
Jeg tror du har misforstået mit spørgsmål lidt.
Formålet er ikke at hjælpe brugeren med at skrive det rigtige i tekstfeltet, men at hjælpe ham med at vælge det rigtige i listbox'en (hvor det er muligt at vælge mere end én ting).
Jeg har lavet en demo i Delphi af hvordan jeg havde tænkt mig at det skulle være: http://fyrrevang.dk/filterdemo.exe
Det var en god idé at køre det på onkeyup (onkeydown og onkeypress ser ud til at blive kørt før værdien af tekstboksen bliver ændret).
Det eneste jeg lige kan se at det ikke fanger, er når brugeren højreklikker på feltet og vælger Indsæt/Sæt ind (for at paste tekst). Er der en event der fanger det?
Ok, så forstår jeg bedre dit og arne_v's svar. Jeg har bare set at min asp:ListBox blev oversat til en select :)
Den essencielle JQuery kode:
Eksempel i brug:
Codebehind:
$().ready(function() {
var search = $("#search");
var listbox = $("#monthsListBox");
search.keyup(function() {
listbox.find("option").show();
listbox.find('option:not(:contains("' + search.val() + '"))').hide();
});
});
Eksempel i brug:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AutoCompleteExample._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Autocomplete Example</title>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$().ready(function() {
var search = $("#search");
var listbox = $("#monthsListBox");
search.keyup(function() {
listbox.find("option").show();
listbox.find('option:not(:contains("' + search.val() + '"))').hide();
});
});
</script>
</head>
<body>
<form runat="server">
<div>
<input id="search" type="text" /> <br />
<asp:ListBox ID="monthsListBox" SelectionMode="Multiple" runat="server">
</asp:ListBox>
</div>
</form>
</body>
</html>
Codebehind:
namespace AutoCompleteExample
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
var months = new List<string>()
{
"Januar", "Februar", "Marts",
"April", "Juni", "Juli", "August",
"September", "Oktober", "November", "December"
};
monthsListBox.DataSource = months;
monthsListBox.DataBind();
}
}
}
Super, så må jeg bare leve med at det ikke virker med Højreklik -> Indsæt, men det går også nok. Det gjorde de fleste AutoCompletion eksempler jeg kunne findes rundt omkring heller ikke (bortset fra Facebooks). Selv med Googles kunne man ikke.
Men mange tak for hjælpen ihf. :)
Men mange tak for hjælpen ihf. :)
windcape (8) skrev:Newtonsoft.Json (JSON for C#): http://james.newtonking.com/pages/json-net.aspx
Det bruger du jo slet ikke i din kode. Det er en god idé at holde eksempler helt simple.
windcape (17) skrev:Hmf, ja.
Jeg har åbenbart fjernet det, og glemt det. Fandens også :p
Men stadigvæk relevant for en evt. AJAX service!
JavaScriptSerializer (System.Web.Script.Serialization) er vel fint i det tilfælde. Det ville jeg i hvert fald bruge (det er også valget i JsonResult i ASP.NET MVC).
Gå til top
Opret dig som bruger i dag
Det er gratis, og du binder dig ikke til noget.
Når du er oprettet som bruger, får du adgang til en lang række af sidens andre muligheder, såsom at udforme siden efter eget ønske og deltage i diskussionerne.
- Forside
- ⟨
- Forum
- ⟨
- Programmering
Gå til bund