jQuery UI autocomplete - Spanish character displays correctly locally but not on server
<p>I'm using jQuery Autocomplete and on my local machine it works fine for special spanish characters, but on the server, it doesn't display right.</p>

<p>Local machine:</p>

<p><a href="https://i.stack.imgur.com/swxGg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/swxGg.png" alt="enter image description here"></a></p>

<p>Notice the correct display of "Fernando Cañas". No problem locally. So then I deploy my PHP files to my linux server (running MySQL), run the same thing, and I get "Fernando Ca�as".</p>

<p>The strange thing is that when I look at the raw json in a browser window, it displays correctly: "Fernando Cañas". BUT in Chrome Developer Tools (running from the server to my local Chrome), again it's wrong:</p>

<p><a href="https://i.stack.imgur.com/Y22FP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y22FP.png" alt="enter image description here"></a></p>

<p>In summary, everything is perfect on my local PC which is Windows 10, IIS running PHP, and MySQL. But on my linux server (running PHP on Apache and MySQL), here is the breakdown:</p>

<ul>
<li>jquery autocomplete: wrong</li>
<li>Chrome Developer Tools looking at the json: wrong</li>
<li>Chrome browser, viewing the jason: right</li>
</ul>

<p><a href="https://i.stack.imgur.com/ZHuUV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZHuUV.png" alt="enter image description here"></a></p>

<p>Here is the json being emitted by the server (identical when I run it locally):</p>

<pre><code>{"id":"4225","value":"Fernando Cañas - (555) 555-5555"}
</code></pre>

<p>And here is my jquery:</p>

<pre><code>$("#SearchStudents").autocomplete({
    formatResult: function(row) {
        return $('&lt;div/&gt;').html(row).html();
    },
    source: function(request, response) {
        $.ajax({
            url: "SearchStudents.php",
            dataType: "json",
            data: {
                term: request.term,
                IncludeInactive: document.getElementById("chkSearchInactive").checked
            },
            success: function(data) {
                console.log(data);
                response(data);
            }
        });
    },
    minLength: 2,
    open: function() {
        $('#SearchStudents').autocomplete("widget").width(350);
    },
    select: function(event, ui) {
        location.href = "Students.php?StudentID=" + ui.item.id;
    }
});
</code></pre>

<p>Please note that the following block makes no difference, whether it's there or not:</p>

<pre><code>formatResult: function(row) {
    return $('&lt;div/&gt;').html(row).html();
}
</code></pre>

<p>What is the solution?</p>