3

Tengo un problema con la presentacion del contenido de las coincidencias que se muestran en un textbox con la libreria autocomplete de JQuery ya que mi texto lleva ñ y pone simbolos raros, creo que no esta decodificando bien mi texto pero no se cómo corregir este problema.

Hago una llamada AJAX a una página que me devuelve los resultados de coincidencia y siento que el problema esta en el 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>

mi json que devuelve Mismo texto en el JSON con Ñ

13
  • 2
    Verificar si la codificación de su documento es utf8 <meta charset="utf-8" />
    – Dev. Joel
    Commented el 17 nov. 2016 a las 18:49
  • verificaste que desde donde obtienes esos datos llega con ñ?
    – sioesi
    Commented el 17 nov. 2016 a las 18:49
  • @sioesi si lleva ñ y tambien he colocado el meta utf-8
    – Ivxn
    Commented el 17 nov. 2016 a las 18:53
  • @Ivxn con el editor de texto que estas trabajando, guarda el archivo con encoding utf8
    – sioesi
    Commented el 17 nov. 2016 a las 18:57
  • Esto no es un problema de codificación en UTF, sino que están codificadas las entidades HTML
    – Mariano
    Commented el 17 nov. 2016 a las 19:03

3 respuestas 3

2

Como se muestra en la imagen, no es un problema de codificación en UTF, sino que se están recibiendo del archivo de autocompletado (./coincidenciaRazonSocial) entidades HTML. En el caso de la Ñ, codificado como &#209;.

Para solucionarlo, podemos modificar la respuesta recibida por AJAX en esta parte del código:

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

Llamando a una función para decodificar:

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

Y utilizar la siguiente función para convertir cualquier entidad decimal en su caracter correspondiente:

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

Nota: esta función sólo aplica para entidades numéricas decimales como la mostrada en la imagen (&#209;), y no reemplaza otras como &aacute;, &gt; o &#x03A3; (hexadecimal).



Para mostrar un ejemplo, subí un archivo de texto con 3 items ("DISE&#209;O 01", ..02 y ..03), que obtendremos por 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>

5
  • la funcion me marca error en " =>"
    – Ivxn
    Commented el 17 nov. 2016 a las 19:48
  • @lvxn Agregué un snippet y modifiqué la función con una versión no tan moderna
    – Mariano
    Commented el 17 nov. 2016 a las 20:15
  • si era algo que no sabia como hacerlo gracias bro
    – Ivxn
    Commented el 17 nov. 2016 a las 20:36
  • amigo ahora tengo un problema con un ampersond me aparece este codigo "&amp;" como lo puedo integrar en la funcion con la que me ayudaste
    – Ivxn
    Commented el 24 nov. 2016 a las 18:45
  • 1
    Estaba por contestarte cuando vi que publicaste una nueva pregunta y respondí ahí: es.stackoverflow.com/a/35802/127
    – Mariano
    Commented el 24 nov. 2016 a las 20:14
2

Ya que los registros llegan codificados como entidades HTML en el json, se me ocurren 2 posibles soluciones

  1. Parchar el jQuery Autocomplete para que use el valor de label como HTML (innerHTML) en lugar de texto (innerText).

    En la doc, existe el link a la extension de Scott González que hace esto.

  2. Decodificarlos antes de devolverlos.

    En coincidenciaRazonSocial, deberias:

    • El nombre NO esta codificado en la DB: Controlar que no estes codificando el nombre. Por ejemplo:

      //PHP
      $empresa['nombre'] = htmlentities($empresa['nombre']); // No hacer esto
      
      // ASP.NET
      Dim nombre As String = System.Web.HttpUtility.HtmlEncode(nombreEmpresa) // No hacer esto
      
    • El nombre SI esta codificado en la DB: Entonces deberias decodificarlos. Por ejemplo:

      // PHP
      $empresa['nombre'] = html_entity_decode($empresa['nombre']); // decode el nombre
      
      // ASP.NET
      Dim nombre As String = System.Web.HttpUtility.HtmlDecode(nombreEmpresa)
      
1
  • gracias tambien funciona
    – Ivxn
    Commented el 17 nov. 2016 a las 20:47
0

En mi caso estuve trabajando con CodeIgniter y Jquery, lo que me funcionó fue usar el siguiente método

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
}
}

En el label uso htmlspecialchars y con eso solucioné el tema.

Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.