Typeahead js Autocomplete in Laravel?

Question

Typeahead js Autocomplete in Laravel?

Navigation

#1 by (0 votes)

1

I am implementing AUTOCOMPLETE typeahead js bootstrap in my application Laravel and it works perfectly, currently it only returns the name of the municipality of the municipalities table, except that of this table I want to return two values one of the MUNICIPALITY and another one of the UF according with which the person types in the field, I do not know how to do this because I do not understand much of javascript , I'm waiting.

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 autocompletar

asked by anonymous 08.06.2017 / 21:33

1 answer

Doubt HeaderFixed GridView Mouse over menu and display submenus

score 0 · Accepted Answer

If the database is use the 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><scriptsrc="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:5px0;background-color:#fff;border:1pxsolid#ccc;border:1pxsolidrgba(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:05px10pxrgba(0,0,0,0.2);-moz-box-shadow:05px10pxrgba(0,0,0,0.2);box-shadow:05px10pxrgba(0,0,0,0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.tt-suggestion{display:block;padding:3px20px;}.twitter-typeahead.tt-suggestion.tt-cursor{color:#fff;background-color:#0081c2;background-image:-moz-linear-gradient(top,#0088cc,#0077b3);background-image:-webkit-gradient(linear,00,0100%,from(#0088cc),to(#0077b3));background-image:-webkit-linear-gradient(top,#0088cc,#0077b3);background-image:-o-linear-gradient(top,#0088cc,#0077b3);background-image:linear-gradient(tobottom,#0088cc,#0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0077b3',GradientType=0);}.tt-suggestion.tt-cursora{color:#fff;}.tt-suggestionp{margin:0;}</style></head><body><inputtype="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>

MySQL - CONCAT Function