Wikipedia Viewer with keyup event(live search) - Working but page is refreshing?

Hi guys, I already made the Wikipedia Viewer with the onclick Event,
However, now Im trying to make a live search with the “keyup” function which also working.

But when I start typing is like the page is always refresh…

http://codepen.io/steffanek/pen/mObLRx?editors=1010

Hi Steffanek,

I saw your question prior to your edit. To give you an idea what handling arrow-down key would look like have a look here

1 Like

Thanks, however before I wanna solve the problem that I edit above. If you look my page is refreshing all the time that Im writing a new letter… do you know how to solve this ?

Because normally for those kind of Live and Quick search. I should LOAD the Database first (which is my API) and then hide it before we start typing. And show only the matching word with the Database.

The issue is you’re removing and re-adding the elements. You couldn’t load all possible matching wikipedia articles ahead of time because it would be too many.

I made an adjustment which gets around the appearance issue.

Let me know if it makes sense and if it’s what you’re looking for.

Hey thanks however could you comment little bit your changings, the foor loop, prepend and the children slice ? Also notice that there is an issue cuz sometimes u got some undefined articles, I dunno if you remark it :slight_smile:

No problem, sorry I didn’t explain better earlier. If you look at the pen again you’ll see better remarks.

Basically, what is happening is the results of each search are inserted in front of the previous results using .prepend(). This prevents the page from appearing to refresh because

  • s are not removed and re-added.

    Because we are now adding to the beginning and not the end, I had to change the for loop to start with the last result in data[] so that the top result (data[0]) is .prepend() to the beginning during the last loop iteration. Otherwise the results would appear to be backwards, with the least-accurate result on top.

    To prevent the results from growing out of control we remove all list items after item # 10 using .slice(10). This returns a selection of

  • 10, 11, 12… to the end and removes them.

    I didn’t notice anything being undefined but it’s possible something isn’t right. I just meant my adjustment to be a quick example of what the solution might look like.

    Please do let me know if you have any additional questions.