mboost-dp1

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

...

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;
}
}
}
}
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...
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)
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.
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>
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();
}
}
}
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.
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!
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).
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 :(
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 :-)
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