Jan

15

Hakusanan korostaminen tekstikentässä

Filed Under Flash & Flex 

Flash tutorialFlash MX 2004, Flash Player 6

Katso valmis esimerkki  |   Lataa työtiedosto koneellesi

Sinulle on varmasti hakukoneden kautta tullut tutuksi ominaisuus, jossa tekstikenttään kirjoittamasi hakusanat on korostettu sivulle ilmestyviin hakutuloksiin. Tässä hieman yksinkertaistettu esimerkki samasta ominaisuudesta Flashilla.

Koodi

b.onRelease = replaceText;
 
var originalTxt = rep.text;
 
function replaceText()
{
	var t = sel.text;
	rep.htmlText = originalTxt.split(t).join("<b><font color='#ff0000'>"+t+"</font></b>");
}

Kyllä. Tämän enempää ActionScriptiä ei kyseisen toiminnallisuuden toteuttamiseen tarvita. Katsotaanpa mitä koodi tekee.

b.onRelease = replaceText;

1. Sijoitetaan painikkeen onRelease- eventiin funktiokutsu.

var originalTxt = rep.text;

2. Tallennetaan alkuperäinen teksi dynaamisesta kentästä muuttujaan.

function replaceText()
{
	var t = sel.text;
	rep.htmlText = originalTxt.split(t).join("<b><font color='#ff0000'>"+t+"</font></b>");
}

3. Määritellään funktio, joka tekee varsinaisen “likaisen” työn. Ensin tallennetaan muuttujaan (“t“) hakusana, jonka käyttäjä on kirjoittanut hakukenttään (“sel“). Sen jälkeen alkuperäinen teksti (“originalTxt“) “paloitellaan” taulukkoon jokaisen hakusanaesiintymän kohdalta. Split()- metodi palauttaa taulukon, joka ei siis sisällä hakusanaa. Tämä taulukko voidaan muuttaa takaisin kokonaiseksi tekstiksi join()-metodin avulla. Parametriksi annetaan hakusana, joka korostetaan relevanteilla HTML-tageilla. Käytän esimerkissä <b>- ja <font>- tageja.

join()-metodi palauttaa lopullisen tekstin, jossa on hakusanat lihavoitu ja väritetty punaisella. Tämä teksti sitten tulostetaan uudestaan tekstikenttään.

Huomioita

Kun käytät tulostat tekstikenttään HTML-tageja sisältävää tekstiä, tulee tekstikenttä asettaa renderöimään sille syötettävä teksti html- muotoisena.

render html

Normaalisti teksti sijoitetaan tekstikenttään text-ominaisuudella. Kun teksti sisältää HTML-tageja, tulee käyttää htmlText-ominaisuutta.

rep.htmlText = originalTxt.split(t).join("<b><font color='#ff0000'>"+t+"</font></b>");

Huomaa myös, että Flash tukee vain pientä joukkoa HTML-tageja. Löydät täydellisen listan tuetuista tageista Flashin omista helpeistä tai Macromedian sivuilta:

Supported HTML tags [en]

Share

Comments

Leave a comment