HTML entity not displaying properly after insertion using JS

Question

I am making an autocomplete drop-down list for my Pokemon website, and while the autocompleting drop-down bit works, it's not displaying the HTML entities properly. When I set the input's value to the entity, it simply prints out the text (e.g. ↑ and not a literal up arrow). I'm not sure what I am doing wrong, but here is a simplified version of it:

 // There are usually a lot more, but just for simplification only one is shown
 const natures = [
    {name: "Lonely (Atk &uarr; Def&darr;)"}
 ]

const natureInput = document.querySelector(".natureInput");
const suggestionsPanelNature = document.querySelector(".natureSuggestions");
// This is just used to see whether they have chosen one of the options
let set_nature = 0;

natureInput.addEventListener('keyup', function() {
    set_nature = 0;
    const input = natureInput.value;
    suggestionsPanelNature.innerHTML = '';
    // Find all of the natures that start with the input
    const suggestions = natures.filter(function(nature) {
        return nature.name.toLowerCase().startsWith(input.toLowerCase());
    });
    suggestions.forEach(function(suggested) {
        // Display all matching natures
        const div = document.createElement("div");
        div.onclick = function()    {
            set_nature = 1;
            natureInput.value = suggested.name; // This is the line that seems to be causing issues
            suggestionsPanelNature.innerHTML = '';
        };
        div.classList.add("suggestion");
        div.innerHTML =  suggested.name; // This line, however, works fine
        suggestionsPanelNature.appendChild(div);
    });
    if (input === '')   {
        suggestionsPanelNature.innerHTML = '';
    }
})

So if someone clicked the Lonely (Atk↑ Def↓) option, it would come up in the input box as Lonely (Atk↑ Def↓), which is not what I want.

If you need anymore information please ask, but otherwise thanks in advance.

You want the string with "decoded" html entities: [Unescape HTML entities in Javascript?](https://stackoverflow.com/questions/1912501/unescape-html-entities-in-javascript) — Andreas, Sep 23 '20 at 07:51

score 0 · Accepted Answer · edited Sep 23 '20 at 07:56

0

Im assuming you have an HTML similar to

<input type="text" class="natureInput">
<div class="natureSuggestions"></div>

If that's the case, you just need to replace ↑ and ↓ with ↑ and ↓. The input element is just normal text, so no need to escape it (Not when the user is typing, nor when you change it via js)

Fiddle: https://jsfiddle.net/ng6er7ov/2/

(Tip; is always nice to post a complete example with html and js somewhere like jsfiddle so people can just see what you have, instead of having to guess based on the code)

edited Sep 23 '20 at 07:56

Andreas

21,535
7
47
56

answered Sep 23 '20 at 07:52

Juanjo Martinez

679
7
18

Thanks for the advice, I will keep that in mind, but when I implemented your solution to my code, it got even weirder and started displaying this: â†“ instead. I'm not sure if this means that it has to do with my web emulator (I am just using visual studio to edit, and then displaying to "new" edge), or that my computer is just really weird, but it works on jfiddle. – Daniel Sep 23 '20 at 08:18
Second update (sorry), but I just put the build live on my domain, and your solution does work on that, so I don't know what's up with my local emulator, but the important version works now, so thanks! – Daniel Sep 23 '20 at 08:37
About â†“, try to check which file encoding are you using (UTF-8 probably), and if Edge supports it atm. If it doesnt, you can either change to furryfox/chromium for local development, and then check if it's working on the live server, or change the encoding to something Edge supports – Juanjo Martinez Sep 24 '20 at 10:52

score 0 · Answer 2 · answered Sep 23 '20 at 08:10

0

Currently you are just setting the innerHTML to exactly the string you have in natures.name. HTML only escapes certain characters like & and < so you can add the ↑ character directly into your string.

answered Sep 23 '20 at 08:10

Tim

30
6

HTML entity not displaying properly after insertion using JS

2 Answers2