jeudi 14 janvier 2016

Style jQuery autocomplete to add image, and extra fields / varibles

enter image description hereenter image description hereThanks, everyone. I want to style the field and its dropdown of jQuery autocomplete, but the way around is only through the controller I suppose because there, I;m able to concat the variables I need and send it to the jquery autocomplete on the blade file. But concatenating only echoes out the variables as a field, I wish to style the output like it is on the image attached to this post. How do i achieve this?

This is the controller:

public function SelectLocationPlaces(Request $userAdressRequest)
    {
        $term = $userAdressRequest->term;
        $data = LocationPlaces::where('name', 'LIKE', '%'.$term.'%')->take(10)->get();
        $countries = Country::all();
        $countryFlag = CountryFlag::all();
        $results = array();

        foreach ($data as $key => $value) {

            foreach ($countries as $key => $values) {
                if($value->country_id === $values->iso_alpha2){
                    $countrySelected = $values->name;
                    $selectedCapital = $values->capital;
                }
            }

            foreach ($countryFlag as $key => $valueFlag) {
               if($countrySelected === $valueFlag->name){
                    $countryPerFlag = $valueFlag->flag;
                    $countryCurrency = $valueFlag->currency;
                }
                }

                $results[] = 
                **

['value'=>$value->name .$value->timezone_id .$countrySelected, ];

**
        }
        return Response::json($results);
    }

This is the blade file:

<DIV align="center"><SPAN class="div-header">USER ADDRESS</SPAN></DIV>

                <div>{!! Form::text('city_town', Input::old('city_town'), ['class'=>'css-classes', 'placeholder'=>'area/city', 'id'=>'city_town']) !!}</div>
                <div>{!! Form::text('state_province_region', Input::old('state_province_region'), ['class'=>'css-classes', 'placeholder'=>'state/province', 'id'=>'state_province_region']) !!}</div>

                <script type="text/javascript">
                    $('#city_town').autocomplete({
                        source: '{{ url('json/redirects') }}',
                        minLength: 1,
                        autofocus: true,
                        select: function(e, ui){
                            $('#state_province_region').val(ui.item.state_province_region);
                            $('#name').val(ui.item.name);
                        }
                    });
                </script>

This image depicts what I want to achieve: What I want to achieve using CSS / HTML and jquery



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire