JavaScript onchange


Gå til bund
Gravatar

#1 Emil Melgaard 18. aug. 2009 16:37

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å?
Gravatar

#2 arne_v 18. aug. 2009 16:48

#1

Det er en kendt feature i diverse AJAX sammenhænge.

Behøver du kode det fra bunden af?

Det var vel nemmere at finde et færdigt JavaScript lib med funktionaliteten.
The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.
Gravatar

#3 Emil Melgaard 18. aug. 2009 17:28

#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.
Gravatar

#4 Windcape 18. aug. 2009 17:30

Hvis du benytter JQuery er det super nemt. Jeg har et eksempel i mit admin system, som jeg lige kan prøve at hente ud.
http://about.me/windcape
Gravatar

#5 m_abs 18. aug. 2009 17:32

Jeg ville også bruge noget jQuery, du skal have fat i noget onkeydown/up og det er ikke ens påtværs af browsere, men det ordner jQuery for dig.

jQuery er under en MIT/GPL dual licens, så du skal bare bruge den under MIT og du har ikke et licens problem.
"DRMs' primary role is not about keeping copyrighted content off P2P networks." - Dan Glickman, MPAA.
Gravatar

#6 Windcape 18. aug. 2009 17:33


<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" />

...

http://about.me/windcape
Gravatar

#7 Windcape 18. aug. 2009 17:34

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;
}
}
}
}
http://about.me/windcape
Gravatar

#8 Windcape 18. aug. 2009 17:35

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...
http://about.me/windcape
Gravatar

#9 Windcape 18. aug. 2009 17:50

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)
http://about.me/windcape
Gravatar

#10 Emil Melgaard 18. aug. 2009 18:28

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?
Gravatar

#11 Windcape 18. aug. 2009 18:53

Well, det er samme koncept, men en del nemmere. Jeg ser lige om jeg kan smække et eksempel sammen.

Men du sagde ikke det var select multiple ;-) en alm. select er en dropdown.
http://about.me/windcape
Gravatar

#12 Emil Melgaard 18. aug. 2009 19:12

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 :)
Gravatar

#13 Windcape 18. aug. 2009 19:12

ComboBox: <select></select>

ListBox: <select multiple></select>
http://about.me/windcape
Gravatar

#14 Windcape 18. aug. 2009 19:42

Den essencielle JQuery kode:


$().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();
}
}
}
http://about.me/windcape
Gravatar

#15 Emil Melgaard 18. aug. 2009 19:59

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. :)
Gravatar

#16 Acro 21. aug. 2009 09:38

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.
http://twitter.com/troethom
Gravatar

#17 Windcape 21. aug. 2009 09:46

Acro (16) skrev:
Det bruger du jo slet ikke i din kode. Det er en god idé at holde eksempler helt simple.
Hmf, ja.

Jeg har åbenbart fjernet det, og glemt det. Fandens også :p

Men stadigvæk relevant for en evt. AJAX service!
http://about.me/windcape
Gravatar

#18 Acro 21. aug. 2009 10:33

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).
http://twitter.com/troethom
Gravatar

#19 Windcape 21. aug. 2009 10:37

Acro (18) skrev:
JavaScriptSerializer (System.Web.Script.Serialization) er vel fint i det tilfælde
Hvis du har adgang til the givne API, ja :)

Desværre ikke alle steder der kører 3.5 endnu :(
http://about.me/windcape
Gravatar

#20 Acro 21. aug. 2009 11:06

windcape (19) skrev:
Hvis du har adgang til the givne API, ja :)

Desværre ikke alle steder der kører 3.5 endnu :(


Det er heller ikke alle steder, jeg gider være :-)
http://twitter.com/troethom
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.

Opret Bruger Login