How to indent text in a jQuery autocomplete?

Question

How to indent text in a jQuery autocomplete?

Navigation

#1 by (0 votes)

0

I'm using the jQuery autocomplete and I would like to underline the text being searched within the result, I looked for some examples on the web, but I only found the plugin, like this:

Example

I tried to bring the formatted text of php with the tags html ( <b>texto</b> ), but the autocomplete understands literally showing the tags, it should be for security reasons and I agree:)

Can you do it natively with jQuery?

Example code:

    $("#pesquisax").autocomplete({
        dataType: "json",
        minLength: 3,
        autoFocus: true,
        source: function (request, response) {
            $.ajax(
                    {
                        type: "POST",
                        url: "/solicitacao/solicitacao.localizar.nome",
                        dataType: "json",
                        data: {'term': request.term},
                        success: function (json) {
                            response(json);
                        }
                    });
        }
    }).autocomplete("widget").addClass("autocomplete");

php jquery css autocompletar

asked by anonymous 02.08.2016 / 18:47

1 answer

Controller Edit - Inserting Values Error in the google-charts console?

score 0 · Answer 1

Solution:

        open: function (event, ul) {
            $('.ui-autocomplete li').each(function () {
                var texto = $(this).html().toUpperCase();
                var busca = $("#pesquisax").val().toUpperCase();
                var troca = texto.replace(busca, "<b>" + busca + "</b>");
                $(this).html(troca);
            });
        }

Add the open event and treat each line in the list.

Full example below:

$(document).ready(function() {
  $("#pesquisax").autocomplete({
    source: ["MARCELO", "ROBERTO", "RICARDO", "MARCIA", "MARCIO", "HELENA", "HELENI"],
    open: function(event, ui) {
      $('.ui-autocomplete li').each(function() {
        var texto = $(this).html().toUpperCase();
        var busca = $("#pesquisax").val().toUpperCase();
        var troca = texto.replace(busca, "<b>" + busca + "</b>");
        $(this).html(troca);
      });
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input type="text" id="pesquisax" value="" placeholder="Digite MAR">