Nice to see lots of variations on the Wiki Viewer, here’s mine. Hope you like it.
Have noticed though that autocomplete no longer works on my edit pen, found this to be the case with the Local Weather App, that stopped working on my edit as well. Yet if I open the link they always work fine. Anyone have any ideas to why this might be??
Hey i like it, auto search is a good feature, wish i’d done that in mine too.
It worked fine for me in editor view by the way.
A couple of notes:
the search clears when i press enter, you can also have the search work on enter by adding an event listener for keycode 13, give it a google and you’ll find the precise answer, but basically in mine i used 2 search functions. one that goes on the search button and one for the enter ke - each function then called the API.
the col-6 containing you’r results doesn’t work so well on smaller screens, change it to 10 or 12 on smaller screens and that’ll sort it, or use a media query as you have for the text.
I like the design of this. When I do an initial search, everything is fine. However, when I do a second search, it just adds my search results at the end of my first search and I have to scroll down to find them.
Thanks @ncaron never even tested for a second search, I have now added the following code to the start of the click function to rectify the issue:
$("#display").empty();
@MARKJ78 managed to add this event listener to the input field to solve the initial issue:
onkeydown = "if (event.keyCode == 13) document.getElementById('searchBtn').click()"
Also changed the col widths, good advice thanks. Looks and works so much better now.
Also, I can see why that would work, your telling the button to be clicked on that keycode no?
however i see a problem with it too, it’s only going to work if you have one button on your website, which for this exersise is no issue. But on some of your next projects you might run into the need for more buttons or search fields to hit enter on.
I made seperate functions for this in my weather and wiki apps, so I’m positive theres a better way if i thought about it, however it’s still been quite useful as I’ve gone through my projects as a snippet. It’s there if you want it.
// search button
$('#search').click(function() {
var term = $('#searchTerm').val();
if (term !== '') {
$('.preview-container').html('');
fetch();
}
});
//enter/return key search
$('#searchTerm').keyup(function(event) {
var term = $('#searchTerm').val();
if (event.keyCode == 13) {
if (term !== '') {
$('.preview-container').html('');
fetch();
}
}
});
Exactly that, and you’re right it does cause a problem if other buttons need to handle events, however I think for this exercise it was the best solution I could come up with. I did look at you initial proposition of duplicating code, but thought that it wasn’t really efficient - there must be a magic solution somewhere.
Just thinking aloud here (not something i’ve tried to implement yet), but I wonder if you could do an if statement with an or expression on the two separate functions:
var optionOne = $(‘#search’).click(function() {
return true;
});var optionTwo = $(‘#searchTerm’).keyup(function(event) {
return true;
});if (optionOne === true || optionTwo === true) {
do that thang!!!
}
Code obviously isn’t perfect, but I’m sure you’ll know where I’m coming from.
Curious as to why you couldn’t see the new code in operation as the link works correctly for me.
It sure looks like it’ll work, I can see you’re logic.
I just looked on stack over flow and the top solution is to have 2 functions, like mine, but instead of all that junk I have in my second block, it has your go click this button statement.
A solution a little further down has comments saying it should be the top solution but i didn’t really understand that one as well.
me too, it still not there!