Leave autocomplete search in bold

Question

I have this search script:

			$( function($) {
				$( "#p" ).autocomplete({
					source: "php/search_palavras.php?id_cidade=<?php echo $id_cidade; ?>",
					minLength: 2,
									
					select: function( event, ui ) {
						// Set autocomplete element to display the label
						this.value = ui.item.label;
								
						// Store value in hidden field
						$('#hidden_p').val(ui.item.id);

						// Prevent default behaviour
						return false;					
					}
				});
							
				$( "#p" ).click(function() {
					$('#hidden_p').val(0);
					$('#p').val('');
				});			
			});		

I looked for a lot of ways to do that, but I couldn’t. How do I find something, search in bold.

For example:

pada

padalaugh

Answer 1

You can do the following: Take the part already typed and leave in bold with

document.write("<p>Bold: " + txt.bold() + "</p>");

and complete the rest with the part coming from auto complete, but if the auto complete already brings a string with the whole word just divide it comparing to what has already been typed.

SOURCE

Answer 2

You can use the method ._renderItem and capture the typed text, make a replace in return by adding for example the tag strong, example:

$( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags,
     
    })
    $.ui.autocomplete.prototype._renderItem = function (ul, item) {        
        var t = String(item.value).replace(
                new RegExp(this.term, "gi"),
                "<strong>$&</strong>");
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + t + "</a>")
            .appendTo(ul);
    };
    });

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" placeholder="Digite Java">
</div>