Typeahead js Autocomplete in Laravel?

Asked

Viewed 856 times

1

I am implementing the AUTOCOMPLETE typeahead js bootstrap in my application Laravel and works perfectly, currently it returns only the name of the municipality table municipalities, only from this table I want to return two values one from the MUNICIPALITY and another from the UF according to what the person type in the field, I don’t know how to do this because I don’t know much about javascript, stand by.

Controller:

public function AutoCompleteCidades(Request $request)
{
    $municipios = Municipio::select("municipio as name", "uf")
                        ->where("municipio","LIKE","%{$request->input('query')}%")->get();
    return response()->json($municipios);
}

View

<div class="container">
    <h1>Pesquise</h1>   
    <input class="typeahead form-control" style="margin:0px auto;width:300px;" type="text">
</div>
<script type="text/javascript">
   var path = "/autocompletecidades";
   $('input.typeahead').typeahead({
       source:  function (query, process) {
       return $.get(path, { query: query }, function (data) {
             return process(data);
       });
     }
   });
</script>
laravel self-cmplete

  • The database is Mysql? return two values where this is not very clear?

1 answer

0


If the bank is use the function Concat as follows:

Method:

public function AutoCompleteCidades(Request $request)
{
    $municipios = 
     Municipio::select(DB::raw('concat(municipio, " ",uf) as text, municipio_id as value'))
                ->where("municipio","LIKE","%{$request->input('query')}%")
                ->get();
    return response()->json($municipios);
}

Html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
  <title></title>
    <style>
        .twitter-typeahead {     
            position: relative;
        }
        .tt-dropdown-menu {
            width: 100%;
            min-width: 160px;
            margin-top: 2px;
            padding: 5px 0;
            background-color: #fff;
            border: 1px solid #ccc;
            border: 1px solid rgba(0, 0, 0, 0.2);
            *border-right-width: 2px;
            *border-bottom-width: 2px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            -webkit-background-clip: padding-box;
            -moz-background-clip: padding;
            background-clip: padding-box;
        }
        .tt-suggestion {
            display: block;
            padding: 3px 20px;
        }
        .twitter-typeahead .tt-suggestion.tt-cursor {
            color: #fff;
            background-color: #0081c2;
            background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
            background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
            background-image: -o-linear-gradient(top, #0088cc, #0077b3);
            background-image: linear-gradient(to bottom, #0088cc, #0077b3);
            background-repeat: repeat-x;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
        }
        .tt-suggestion.tt-cursor a {
            color: #fff;
        }
        .tt-suggestion p {
            margin: 0;
        }
    </style>    
</head>
<body>

    <input type="text" id="tid" name="tid" value="" />
    <input class="typeahead form-control" id="ttexto" style="margin:0px auto;width:300px;" type="text">

    <script>        
            $(document).ready(function(){               
                var municipios = new Bloodhound({
                    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("text"),
                    queryTokenizer: Bloodhound.tokenizers.whitespace,
                    remote: {
                        url: "/autocompletecidades?query=%QUERY",
                        wildcard: '%QUERY'
                    },
                    limit: 10
                });
                municipios.initialize();

                $("#ttexto").typeahead({
                    hint: true,
                    highlight: true,
                    minLength: 1
                },
                {
                    name: "municipios",
                    displayKey: "text",
                    source: municipios.ttAdapter()
                }).bind("typeahead:selected", function(obj, datum, name) {
                    console.log(datum);
                    $(this).data("seletectedId", datum.value);
                    $('#tid').val(datum.value);
                    console.log(datum.value);
                });                        
            });
    </script>  

</body>
</html>

Reference:

  • It worked perfectly but I would need to select the municipality id selected in the value of the input field to send the request, how could I do that? when I do a dd($request->all) returns the name of the municipality instead of the id: "municipio_id" => "Macapá - AP"

  • @Brunosantos if I’m not mistaken is an associative array, so I made an edit on the answer gives a look there now to see if it will roll ...

  • tried that way and did not load the autocomplete.

  • I took a look at an answer I think that’s how I do the test now... @Brunosantos

  • I saw in a text that is label and value who has to be informed for Typeahead https://www.upwork.com/hiring/development/creating-autocomplete-functionality-with-php-and-mysql/

  • Why, I don’t know how to do it in the Basement

  • I did there in answer take a look?

  • I couldn’t, I tried how it’s in the answer.

  • What happens to that answer?

  • You are not listing municipalities.

  • @Brunosantos I made a complete code and is in the answer edited, the method of Laravel another full page with 2 text boxes and code ready for you to use. Next that Javascript Bootstrap is with bugs I couldn’t get it to work properly at all, so I went to the site and got the correct javascript that is in the HTML example, you have to use them and the CSS to look like the Boostrap that is also in the answer, it worked perfect now, needs to be adapted to your template there... but, I believe be easy with html. The javascript code is different.

  • cont ... then it has to be this now to work.

  • Let’s go continue this discussion in chat.

  • Remake the test on Laravel @Brunosantos worked at first? is still in trouble?

  • Yes it worked now, thank you very much!

  • Accept the answer then... @Brunosantos

Show 11 more comments

Browser other questions tagged laravel self-cmplete

You are not signed in. Login or sign up in order to post.