Permalänk
Medlem

Javascript: Söka genom array

Tjenare,

Jag blir inte klok på detta - troligen pga att jag inte kan js.

Jag har en js array som jag genererar mha php när sidan laddas:

var suggestions = new Array("bank", "back", "peter","hindu","huge", "test","bums","cat","kind","fight","argue","append","run","sad","silk","light","little","rate","orange","office","lucky","cable","monitor","narration","early","pick","put","hungry","gain","gift","java","junction","vegtable","fan","north","needle","winter","nation","carry","dance","danger","iteration","facile","yahoo","quick","quee","arrangement","vechicle","urban","xerox","zeebra","xML");

Vad jag nu vill göra är följande i JS (psued kod):

var i =0; var antalPosterI_suggestions = count(suggestions); var userInput; while(i < antalPosterI_suggestions) { if(check_for_match(userInput, suggestions[i] == false) { hide_DIV(id.of.div.where.no.match); } i++; }

Jag har alltså en databas med innehållande poster, denna info hämtar jag mha php och skriver in i en js array.
Sen vill jag att när användaren skriver in något i en input ruta så ska det denna skriver matchas, tecken för tecken, och om det inte matchar så ska jag dölja den diven som inte matchar.

Som det är idag så skriver jag ut en lista (som en dropdown, som funkar som en <droplist> fast där jag kan styla om bakgrund samt text). Det jag inte får till är matchning av tecken som användaren skriver in.

Skriver man in t.ex "ba" så ska allt förutom "bank" och "back" försvinna från listan (döljas igen).

Tack på förhand!

Permalänk
Medlem

nu kan jag iof inte js men for loopar är generellt bättre när du på förhand vet hur många gånger du vill iterera. i din while loop så ökar du aldrig variabeln i, den är 0 hela tiden.

edit: meh ok, var lite snabb där, pseudo kod.

Visa signatur

| Ryzen 5800x | Asus prime x470 pro | Asus rtx 3080 tuf oc | Gskill 32gb 3,6ghz | aw3225qf |

Permalänk
Medlem

Ändrat... som sagt... bara psuedo kod..

Permalänk
Avstängd

Kolla in linq.js

Visa signatur
Permalänk
Medlem

Här kommer lite kod för att få dig att komma igång. Inte en komplett lösning, men kan kanske få dig på rätt spår.

var suggestions = new Array("bank"); $('#input').change(function () {// Triggas varje gång man ändrar #input var matches = new Array();// Kommer innehålla alla matches ur suggestions. var input = $(this).val();// Input från user if (input) { $.each(suggestions, function (index, value) { if (value.indexOf(input) == 0) { // Kollar igenom varje entry i arrayn och jämför om den börjar med 'input' matches.push(value); } }); } });

Edit: Såg nu att du inte nämnde om du använde jQuery. Ovanstående är i vilket fall inte något svårt att skriva om i ren javascript.

Permalänk
Medlem

Är detta något i stil med vad du vill göra?

http://jqueryui.com/autocomplete/

jQuery Autocomplete är grymt bra, dock hämtar den data främst med ajax förfrågningar, men du kan enkelt ta din array och skriva ut i en fil som json med php funktionen json_encode. ex. "echo json_encode($array);"

Edit 1: Om du kollar källkoden på denna sida jag länkade till så ser du att dom använder en js variabel för att matcha data nu, så glöm det jag sa om ajax.

// ZarToK

Visa signatur

AMD Phenom II X6 1100T BE @ 4.3 Ghz , Gigabyte GA-990FXA-UD3 AM3+, Corsair 8GB CL9 1866Mhz, Gigabyte R9 280X 3Gb OC, SSD 120GB OCZ Vertex 2

Permalänk
Medlem
Skrivet av Wickit:

Här kommer lite kod för att få dig att komma igång. Inte en komplett lösning, men kan kanske få dig på rätt spår.

var suggestions = new Array("bank"); $('#input').change(function () {// Triggas varje gång man ändrar #input var matches = new Array();// Kommer innehålla alla matches ur suggestions. var input = $(this).val();// Input från user if (input) { $.each(suggestions, function (index, value) { if (value.indexOf(input) == 0) { // Kollar igenom varje entry i arrayn och jämför om den börjar med 'input' matches.push(value); } }); } });

Edit: Såg nu att du inte nämnde om du använde jQuery. Ovanstående är i vilket fall inte något svårt att skriva om i ren javascript.

Hej!
Det ser ut som något jag ska kolla mera på helt klart! Ska dock försöka skriva om det till ren javascript, det tar emot att behöva nytta ett helt bibliotek för att göra något som egentligen inte är så komplicerat!

Tack!

Skrivet av ZarToK:

Är detta något i stil med vad du vill göra?

http://jqueryui.com/autocomplete/

jQuery Autocomplete är grymt bra, dock hämtar den data främst med ajax förfrågningar, men du kan enkelt ta din array och skriva ut i en fil som json med php funktionen json_encode. ex. "echo json_encode($array);"

Edit 1: Om du kollar källkoden på denna sida jag länkade till så ser du att dom använder en js variabel för att matcha data nu, så glöm det jag sa om ajax.

// ZarToK

Hej,
Något åt det hållet ja, men det känns lite "overkill" att nyttja tycker jag.
Jag behöver ju bara matcha användarens $i mot första bokstaven varje post som jag lämnar i arrayn... typisc..

Permalänk
Medlem

Jag skulle rekommendera att du använder json istället för JavaScript arrayn. Lättare att generera och även jobba med i ditt serverside språk.

Skickades från m.sweclockers.com

Permalänk

Inte style'at eller formaterat, men fungerar:
http://jsfiddle.net/3wgUa/

Permalänk
Medlem
Visa signatur

I'm Winston Wolfe. I solve problems.

Permalänk
Medlem
Skrivet av Yxskaftet:

Inte style'at eller formaterat, men fungerar:
http://jsfiddle.net/3wgUa/

Tusen tack! Funkar klockrent nu! Sa ju att det inte behövde vara så krångligt, förutsatt att man vet hur!

Permalänk
Medlem
Skrivet av zajko:

Tjenare,

Jag blir inte klok på detta - troligen pga att jag inte kan js.

Jag har en js array som jag genererar mha php när sidan laddas:

var suggestions = new Array("bank", "back", "peter","hindu","huge", "test","bums","cat","kind","fight","argue","append","run","sad","silk","light","little","rate","orange","office","lucky","cable","monitor","narration","early","pick","put","hungry","gain","gift","java","junction","vegtable","fan","north","needle","winter","nation","carry","dance","danger","iteration","facile","yahoo","quick","quee","arrangement","vechicle","urban","xerox","zeebra","xML");

Vad jag nu vill göra är följande i JS (psued kod):

var i =0; var antalPosterI_suggestions = count(suggestions); var userInput; while(i < antalPosterI_suggestions) { if(check_for_match(userInput, suggestions[i] == false) { hide_DIV(id.of.div.where.no.match); } i++; }

Jag har alltså en databas med innehållande poster, denna info hämtar jag mha php och skriver in i en js array.
Sen vill jag att när användaren skriver in något i en input ruta så ska det denna skriver matchas, tecken för tecken, och om det inte matchar så ska jag dölja den diven som inte matchar.

Som det är idag så skriver jag ut en lista (som en dropdown, som funkar som en <droplist> fast där jag kan styla om bakgrund samt text). Det jag inte får till är matchning av tecken som användaren skriver in.

Skriver man in t.ex "ba" så ska allt förutom "bank" och "back" försvinna från listan (döljas igen).

Tack på förhand!

Precis som matti4s säger, gör det inte svårare än det är.

function hideNotMatching(input) { var toHide = suggestions.filter(function(item) { return item.indexOf(input) === -1; }); toHide.forEach(function(id) { // göm id }); }) }

Visa signatur

Kom-pa-TI-bilitet