Home / Questions / 34461
Accepted
Ivxn
Asked: 2020-11-18 10:41:46 +0800 CST 2020-11-18 10:41:46 +0800 CST

JQuery autocomplete does not return ñ but the HTML entity Ñ

  • 772

I have a problem with the presentation of the content of the matches that are shown in a textbox with the JQuery autocomplete library since my text has ñand puts strange symbols, I think it is not decoding my text well but I do not know how to correct this problem.

I make an AJAX call to a page that returns the match results and I feel like the problem is in the AJAX:

<script>
    $(document).ready(function () {
        $("#btnBusca").css({ 'display': 'none' });
        $("#filtroBusqueda").change(function () {
            var op = $(this).val();

            switch (op) {

                case "rs":
                    $("#rs").css({ 'display': 'block' });
                    $("#ln").css({ 'display': 'none' });
                    $("#nc").css({ 'display': 'none' });
                    $("#btnBusca").css({ 'display': 'block' });
                    break;
                case "ln":
                    $("#ln").css({ 'display': 'block' });
                    $("#rs").css({ 'display': 'none' });
                    $("#nc").css({ 'display': 'none' });
                    $("#btnBusca").css({ 'display': 'block' });
                    break;
                case "nc":
                    $("#nc").css({ 'display': 'block' });
                    $("#rs").css({ 'display': 'none' });
                    $("#ln").css({ 'display': 'none' });
                    $("#btnBusca").css({ 'display': 'block' });
            }
        });

        $("#txtRazon").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "post",
                    url: "coincidenciaRazonSocial",                    
                    dataType: "json",
                    data: {
                        q: request.term
                    },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.nombre,
                                value: item.nombre,
                            }
                        }));
                    }
                });
            }
        });

    });
</script>
<div>
    <h5><span class="glyphicon glyphicon-th"></span> Búsqueda</h5>
    <form id="formularoBuscar" method="post" class="form-horizontal " action="#">

        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="form-group">
                    <label class="col-lg-1 control-label">Filtro</label>
                    <div class="col-lg-11">
                        <select name="filtroBusqueda" id="filtroBusqueda" class="form-control">
                            <option value="" disabled selected>Seleccione Opción</option>
                            <option value="rs"> x Razón social</option>
                            <option value="ln">x Línea</option>
                            <option value="nc">x Número cuenta</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div id="rs" style="display: none">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="form-group">
                        <label class="col-lg-1 control-label">Razón social</label>
                        <div class="col-lg-11">
                            <input type="text" class="form-control" id="txtRazon" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="ln" style="display: none">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="form-group">
                        <label class="col-lg-1 control-label">Número telefonico</label>
                        <div class="col-lg-11">
                            <input type="text" class="form-control" id="txtTelefono" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="nc" style="display: none">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="form-group">
                        <label class="col-lg-1 control-label">Número cuenta</label>
                        <div class="col-lg-11">
                            <input type="text" class="form-control" id="txtCuenta" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="form-group" id="btnBusca">
                    <label class="col-lg-1 control-label"></label>
                    <div class="col-lg-11">
                        <button type="button" id="btnBuscarAdenda">Buscar</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

my json that returns Same text in the JSON with Ñ

javascript

3 Answers

  1. Best Answer

    As shown in the image, it is not a problem of encoding in UTF, but ./coincidenciaRazonSocialHTML entities are being received from the autocomplete ( ) file. In the case of the Ñ, encoded as &#209;.

    To fix it, we can modify the response received by AJAX in this part of the code:

    success: function (data) {
    response($.map(data, function (item) {
        return {
            label: item.nombre,
            value: item.nombre,
        }
    }));
}

    Calling a function to decode:

    success: function (data) {
    response($.map(data, function (item) {
        var nombreDecodificado = decodificarEntidadesHTMLNumericas(item.nombre);
        return {
            label: nombreDecodificado,
            value: nombreDecodificado
        }
    }));
}

    And use the following function to convert any decimal entity to its corresponding character:

    function decodificarEntidadesHTMLNumericas(texto) {
    return texto.replace(/&#(\d{1,8});/g,function (m, ascii) {
        return String.fromCharCode(ascii);
    });
}

    Note: this function only applies to decimal numeric entities such as the one shown in the image ( &#209;), and does not replace others such as &aacute;, &gt;or &#x03A3;(hexadecimal).


    To show an example, I uploaded a text file with 3 items ( "DISE&#209;O 01", ..02and ..03), which we will get by AJAX:

    $(document).ready(function () {
    $("#txtRazon").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: "post",
                url: "http://mariano.freevar.com/34461/coincidenciaRazonSocial.txt",                    
                dataType: "json",
                data: {
                    q: request.term
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        var nombreDecodificado = decodificarEntidadesHTMLNumericas(item.nombre);
                        return {
                            label: nombreDecodificado,
                            value: nombreDecodificado
                        }
                    }));
                }
            });
        }
    });

});

function decodificarEntidadesHTMLNumericas(texto) {
    return texto.replace(/&#(\d{1,8});/g,function (m, ascii) {
        return String.fromCharCode(ascii);
    });
}
    <!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<!-- HTML -->
<div>
    <h5><span class="glyphicon glyphicon-th"></span> Búsqueda</h5>
    <form id="formularoBuscar" method="post" class="form-horizontal " action="#">
        <div id="rs" style="display: block">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="form-group">
                        <label class="col-lg-1 control-label">Razón social</label>
                        <div class="col-lg-11">
                            <input type="text" class="form-control" id="txtRazon" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

    • 2

  2. Since the records arrive encoded as HTML entities in the json, I can think of 2 possible solutions

    1. Patch the jQuery Autocompleteso that it uses the value of labelas HTML(innerHTML) instead of texto(innerText).

      In the doc , there is a link to Scott González's extension that does this.

    2. Decode them before sending them back.

      In coincidenciaRazonSocial, you should:

      • The name is NOT encoded in the DB : Check that you are not encoding the nombre. For example:

        //PHP
$empresa['nombre'] = htmlentities($empresa['nombre']); // No hacer esto

// ASP.NET
Dim nombre As String = System.Web.HttpUtility.HtmlEncode(nombreEmpresa) // No hacer esto

      • The name IS encoded in the DB : So you should decode them. For example:

        // PHP
$empresa['nombre'] = html_entity_decode($empresa['nombre']); // decode el nombre

// ASP.NET
Dim nombre As String = System.Web.HttpUtility.HtmlDecode(nombreEmpresa)
    • 2

  3. In my case I was working with CodeIgniter and Jquery, what worked for me was to use the following method

    public function autocompletar($q){
$this->db->select('*');
$this->db->like('nombre', $q);
$query = $this->db->get('empresa');
if($query->num_rows() > 0){
  foreach ($query->result_array() as $row){
    $new_row['label']=htmlspecialchars(stripslashes($row['nombre']));
    $new_row['value']=htmlentities(stripslashes($row['id']));
    $row_set[] = $new_row; //build an array
  }
  echo json_encode($row_set); //format the array into json data
}
}

    In the label I use htmlspecialchars and with that I solved the issue.

    Cheers

    • 0