jQuery AutoComplete - Result shows encoded characters

问题

I'm using the following code to search an ajax file for a query with the autocomplete plugin:

$("input.search_bar").autocomplete("/autocomplete/", {
    scrollHeight: 300,
    minChars: 3
});

The search results are HTML encoded names like:

Bob's Store (really Bob%39s Store) Bill's Shop (really Bill%39s Shop) etc...

The autocomplete dropdown shows the correct HTML like so:

Bob's Store Bill's Shop

But when I select one of the results and the result moves into the input field, the input field displays the escaped value like so:

Bob%39s Store

How do I use the jQuery Autocomplete plugin to format the result to show the unescaped value when a result is chosen?

I've tried the following plugin function without any luck:

$("input.search_bar").autocomplete("/autocomplete/", {
    scrollHeight: 300,
    minChars: 3,
    formatResult: function(row) {
      return unescape(row);
    }
});

回答1:

try this code,

$("input.search_bar").autocomplete("/autocomplete/", {
    scrollHeight: 300,
    minChars: 3,
    formatResult: function(row) {
      return $('<div/>').html(row).html();
    }
});

回答2:

I had the same problem. The source for the JSON output was a JSP file.

The JSON usage example showed using single quotes to delimit the suggesion entries which I changed to double quotes.

It still didn't work until I changed from using a <c:out value="...."> tag to simply using ${....}. That fixed the problem. The <c:out> tag was automatically escaping the output.

If you are not using Java, make sure the function that you are using to generate your JSON does not automatically encode/escape values. I didn't notice this until I hit a person's name with a single quote in it.

回答3:

try decodeURI():

$("input.search_bar").autocomplete("/autocomplete/", {
    scrollHeight: 300,
    minChars: 3,
    formatResult: function(row) {
      return decodeURI(row);
    }
});

来源：https://stackoverflow.com/questions/8482949/jquery-autocomplete-result-shows-encoded-characters

标签

jquery

jquery-autocomplete