Leave the autocomplete search in bold

Question

Leave the autocomplete search in bold

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

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 several ways to do this, but I could not. How do I search for something, the search is bold.

For example:

pada

pada ria

jquery autocompletar

asked by anonymous 27.06.2017 / 15:40

2 answers

1

You can do the following: Pick up the part already typed and leave it bold with

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

and complete the rest with the part coming from the auto complete, but if the auto complete already brings a String with the entire word is just divide it compared to what has already been typed.

SOURCE

27.06.2017 / 15:48

Problem in the size of HTML checkboxes How to delete or hide the password typing of data access from a server running SQL Server from VBA or Excel macro?

score 1 · Accepted Answer

You can use the ._renderItem method to capture typed text, make a replace in return 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><scriptsrc="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>