jquery autocomplete character encoding

Question

I have jQuery autocomplete setup on a text input and apostrophes are not being converted from ' which is how they are stored in the database.

Autocomplete drop-down displays Bill's Apartments instead of Bill's Apartments.

From my understanding the browser converts ' to and apostrophe, '.

Is the data being double encoded? Is jQuery encoding the data it is receiving via $.ajax? This seems like the case as the apostrophe is already encoded. jQuery must be encoding the ampersand?

I'm saving my files with UTF-8 Encoding.
MySQL charset: UTF-8 Unicode (utf8)
Database collation utf8_general_ci.
Using meta tag with HTML 5, <meta charset="utf-8">.
Backend PHP script for ajax uses json_encode() on array of property names.
Using error_log() to store the result of json_encode() I get, [{"value":"Bill's Apartments"}]
Using console.log(data) shows Bill's Apartments.
Accessing the PHP Ajax script directly in the browser with ?term=bi appended to the path returns [{"value":"Bill's Apartments"}].
Using PHP functions like html_entity_decode() or htmlspecialchars() do not work or appear to be the proper solution.

HTML

<input type="text" id="property-name" name="property-name" value="">

jQuery

$('#property-name').autocomplete({
     source: function(request, response) { 
          $.ajax({
               url : ABSPATH + 'includes/ajax/property-name-search.php',
               dataType : "json",
               data : request,
               success : function(data) {
                   response(data);
               }
          });
     },
     max: 25,
     minLength: 2
});

Simplified Backend PHP

$query = "SELECT `property_name`
          FROM `property_name_table`
          WHERE `property_name` LIKE '%name%'";

$result = $mysqli->query( $query );

while ( $row = $result->fetch_object() ) :
     $property_names[] = array( 'value' => $row->property_name );
endwhile;

echo json_encode( $property_names );

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

It sounds like you're passing encoded data directly to your function. The browser is requesting and being sent json data. In other words the browser will not parse your data as html.

I suggest trying either something like this $(#some_div>.html(returned data from ajax call); Then setting the autocomplete to take as source some_div Note: the jQuery .html function will unencode your data.

Or use a custom conversion function like this one htmlUnescape here https://stackoverflow.com/a/7124052/2478282

edited May 23 '17 at 11:51

Community

1
1

answered Jun 12 '13 at 15:32

DavidW

353
2
10

since I'm passing the encoded data directory to my function and it is being dynamically added to the page, does the browser not have a chance to parse the encoding into what it represents? I guess that is what I'm asking. – hungerstar Jun 12 '13 at 18:27
The browser will attempt to decode html, not javascript. However, some jquery functions, for example html(), will also decode html, but autocomplete isn't one of them. – DavidW Jun 13 '13 at 16:43
Okay. If you could edit your answer and add to it so that it explains why the encoded character is not decoded by the browser then I think that will satisfy my question and I will accept your answer. – hungerstar Jun 13 '13 at 18:52

jquery autocomplete character encoding

1 Answers1