Setting the value in jquery autocomplete

I am using jquery autocomplete for a input box of cities but when i send the input it sends the name of the selected city rather than the id, how do i send the id but still show the name when using autocomplete?

so in essence i want autocomplete to be like:

< -option value="{{$city->id}}">{{city->name}}<-/option->

Here is my current code:

HTML:

        <div class="search-homepage-input">

            {!! Form::open(['route' => 'search.index', 'method' => 'GET']) !!}

            <div class="col-md-9">

            {!! Form::text('city', null, array('class' => 'form-control', 'maxlength' =>'55', 'placeholder' => 'Eg. England, London, Manchester', 'id' => 'sl')) !!}

            </div>

            <div class="col-md-3">

                {!! Form::submit('Find Teams', array('class' => 'btn btn-homepage'))  !!}

            </div>

            {!! Form::close() !!}

        </div>

PHP(Laravel):

 public function autoComplete(Request $request){



    $query = $request->term;

    $res = City::where('name', 'LIKE', "%$query%")->orderBy('name')->paginate(5);

    foreach($res as $cities ){

        $usersArray = $cities->name;

    }

    return response()->json($usersArray);

}

JS:

 $('#sl').autocomplete({

            source: '/autocomplete'

        })

asked Nov 18 '18 at 17:53

detinu20

1239

What is some example data that would be found in $usersArray ? If it's sending back an object versus an array, you may get varied results.

– Twisty
Nov 18 '18 at 19:08

add a comment |

so in essence i want autocomplete to be like:

< -option value="{{$city->id}}">{{city->name}}<-/option->

Here is my current code:

HTML:

        <div class="search-homepage-input">

            {!! Form::open(['route' => 'search.index', 'method' => 'GET']) !!}

            <div class="col-md-9">

            {!! Form::text('city', null, array('class' => 'form-control', 'maxlength' =>'55', 'placeholder' => 'Eg. England, London, Manchester', 'id' => 'sl')) !!}

            </div>

            <div class="col-md-3">

                {!! Form::submit('Find Teams', array('class' => 'btn btn-homepage'))  !!}

            </div>

            {!! Form::close() !!}

        </div>

PHP(Laravel):

 public function autoComplete(Request $request){



    $query = $request->term;

    $res = City::where('name', 'LIKE', "%$query%")->orderBy('name')->paginate(5);

    foreach($res as $cities ){

        $usersArray = $cities->name;

    }

    return response()->json($usersArray);

}

JS:

 $('#sl').autocomplete({

            source: '/autocomplete'

        })

asked Nov 18 '18 at 17:53

detinu20

1239

What is some example data that would be found in $usersArray ? If it's sending back an object versus an array, you may get varied results.

– Twisty
Nov 18 '18 at 19:08

add a comment |

so in essence i want autocomplete to be like:

< -option value="{{$city->id}}">{{city->name}}<-/option->

Here is my current code:

HTML:

        <div class="search-homepage-input">

            {!! Form::open(['route' => 'search.index', 'method' => 'GET']) !!}

            <div class="col-md-9">

            {!! Form::text('city', null, array('class' => 'form-control', 'maxlength' =>'55', 'placeholder' => 'Eg. England, London, Manchester', 'id' => 'sl')) !!}

            </div>

            <div class="col-md-3">

                {!! Form::submit('Find Teams', array('class' => 'btn btn-homepage'))  !!}

            </div>

            {!! Form::close() !!}

        </div>

PHP(Laravel):

 public function autoComplete(Request $request){



    $query = $request->term;

    $res = City::where('name', 'LIKE', "%$query%")->orderBy('name')->paginate(5);

    foreach($res as $cities ){

        $usersArray = $cities->name;

    }

    return response()->json($usersArray);

}

JS:

 $('#sl').autocomplete({

            source: '/autocomplete'

        })

asked Nov 18 '18 at 17:53

detinu20

1239

so in essence i want autocomplete to be like:

< -option value="{{$city->id}}">{{city->name}}<-/option->

Here is my current code:

HTML:

        <div class="search-homepage-input">

            {!! Form::open(['route' => 'search.index', 'method' => 'GET']) !!}

            <div class="col-md-9">

            {!! Form::text('city', null, array('class' => 'form-control', 'maxlength' =>'55', 'placeholder' => 'Eg. England, London, Manchester', 'id' => 'sl')) !!}

            </div>

            <div class="col-md-3">

                {!! Form::submit('Find Teams', array('class' => 'btn btn-homepage'))  !!}

            </div>

            {!! Form::close() !!}

        </div>

PHP(Laravel):

 public function autoComplete(Request $request){



    $query = $request->term;

    $res = City::where('name', 'LIKE', "%$query%")->orderBy('name')->paginate(5);

    foreach($res as $cities ){

        $usersArray = $cities->name;

    }

    return response()->json($usersArray);

}

JS:

 $('#sl').autocomplete({

            source: '/autocomplete'

        })

jquery laravel jquery-ui laravel-5 autocomplete

asked Nov 18 '18 at 17:53

detinu20

1239

asked Nov 18 '18 at 17:53

detinu20

1239

asked Nov 18 '18 at 17:53

detinu20

1239

asked Nov 18 '18 at 17:53

detinu20

1239

asked Nov 18 '18 at 17:53

detinu20

1239

What is some example data that would be found in $usersArray ? If it's sending back an object versus an array, you may get varied results.

– Twisty
Nov 18 '18 at 19:08

add a comment |

What is some example data that would be found in $usersArray ? If it's sending back an object versus an array, you may get varied results.

– Twisty
Nov 18 '18 at 19:08

What is some example data that would be found in $usersArray ? If it's sending back an object versus an array, you may get varied results.

– Twisty
Nov 18 '18 at 19:08

add a comment |

1 Answer
1

active

oldest

votes

I think you want to do something like the following:

public function autoComplete(Request $request){

  $query = $request->term;

  $res = City::where('name', 'LIKE', "%$query%")->orderBy('name')->paginate(5);

  foreach($res as $cities ){

    $usersArray = array(

      "label" => $cities->name,

      "value" => $cities->id

    );

  }

  return response()->json($usersArray);

}

Review the following page: http://api.jqueryui.com/autocomplete/#option-source

Array: An array can be used for local data. There are two supported formats:

An array of strings: [ "Choice1", "Choice2" ]

An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

So you wabt to return JSON like:

Array [

  Object {

    "label": "City",

    "value": id

  }

];

Hope that helps.

Update

When the user makes a selection, it uses the select callback. In the above example, the label is shown and the user selects it. This then sets the value attribute to the value of the selected item. This can be seen here: http://jqueryui.com/autocomplete/#custom-data

With your Autocomplete code, this might look like:

HTML

<div class="search-homepage-input">

  {!! Form::open(['route' => 'search.index', 'method' => 'GET']) !!}

  <div class="col-md-9">

    {!! Form::text('city-name', null, array('class' => 'form-control', 'maxlength' =>'55', 'placeholder' => 'Eg. England, London, Manchester', 'id' => 'sl-label')) !!}

    {!! Form::text('city-id', null, array('class' => 'form-control', 'id' => 'sl-id', 'style' => 'display: none;') !!}

  </div>

  <div class="col-md-3">

    {!! Form::submit('Find Teams', array('class' => 'btn btn-homepage'))  !!}

  </div>

  {!! Form::close() !!}

</div>

JavaScript

$('#sl').autocomplete({

  source: "/autocomplete",

  focus: function(event, ui) {

    $("#sl-label").val(ui.item.label);

    return false;

  },

  select: function(event, ui) {

    $("#sl-label").val(ui.item.label);

    $("#sl-id").val(ui.item.value);

    return false;

  }

});

This way you can collect the ID you're looking to use for search.

edited Nov 19 '18 at 22:49

answered Nov 18 '18 at 19:22

Twisty

13.3k11534

So how would i change the autocomplete to send that?

– detinu20
Nov 18 '18 at 22:56

@detinu you would not make the change in autocomplete. This would be a change to your php. Right now you're only sending 'name' data back to autocomplete.

– Twisty
Nov 19 '18 at 16:58

yes - now the drop down is showing the label- name but when i click on a drop down suggestion it enters the id into the box, what i want is the name to be in the box but the value to be the id so that when i fire off my search it can bring back a search based on that id

– detinu20
Nov 19 '18 at 20:06

@detinu ok, that you then need to do in the select callback.

– Twisty
Nov 19 '18 at 20:25

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53363852%2fsetting-the-value-in-jquery-autocomplete%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I think you want to do something like the following:

public function autoComplete(Request $request){

  $query = $request->term;

  $res = City::where('name', 'LIKE', "%$query%")->orderBy('name')->paginate(5);

  foreach($res as $cities ){

    $usersArray = array(

      "label" => $cities->name,

      "value" => $cities->id

    );

  }

  return response()->json($usersArray);

}

Review the following page: http://api.jqueryui.com/autocomplete/#option-source

Array: An array can be used for local data. There are two supported formats:

An array of strings: [ "Choice1", "Choice2" ]

An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

So you wabt to return JSON like:

Array [

  Object {

    "label": "City",

    "value": id

  }

];

Hope that helps.

Update

With your Autocomplete code, this might look like:

HTML

<div class="search-homepage-input">

  {!! Form::open(['route' => 'search.index', 'method' => 'GET']) !!}

  <div class="col-md-9">

    {!! Form::text('city-name', null, array('class' => 'form-control', 'maxlength' =>'55', 'placeholder' => 'Eg. England, London, Manchester', 'id' => 'sl-label')) !!}

    {!! Form::text('city-id', null, array('class' => 'form-control', 'id' => 'sl-id', 'style' => 'display: none;') !!}

  </div>

  <div class="col-md-3">

    {!! Form::submit('Find Teams', array('class' => 'btn btn-homepage'))  !!}

  </div>

  {!! Form::close() !!}

</div>

JavaScript

$('#sl').autocomplete({

  source: "/autocomplete",

  focus: function(event, ui) {

    $("#sl-label").val(ui.item.label);

    return false;

  },

  select: function(event, ui) {

    $("#sl-label").val(ui.item.label);

    $("#sl-id").val(ui.item.value);

    return false;

  }

});

This way you can collect the ID you're looking to use for search.

edited Nov 19 '18 at 22:49

answered Nov 18 '18 at 19:22

Twisty

13.3k11534

So how would i change the autocomplete to send that?

– detinu20
Nov 18 '18 at 22:56

@detinu you would not make the change in autocomplete. This would be a change to your php. Right now you're only sending 'name' data back to autocomplete.

– Twisty
Nov 19 '18 at 16:58

yes - now the drop down is showing the label- name but when i click on a drop down suggestion it enters the id into the box, what i want is the name to be in the box but the value to be the id so that when i fire off my search it can bring back a search based on that id

– detinu20
Nov 19 '18 at 20:06

@detinu ok, that you then need to do in the select callback.

– Twisty
Nov 19 '18 at 20:25

add a comment |

I think you want to do something like the following:

public function autoComplete(Request $request){

  $query = $request->term;

  $res = City::where('name', 'LIKE', "%$query%")->orderBy('name')->paginate(5);

  foreach($res as $cities ){

    $usersArray = array(

      "label" => $cities->name,

      "value" => $cities->id

    );

  }

  return response()->json($usersArray);

}

Review the following page: http://api.jqueryui.com/autocomplete/#option-source

Array: An array can be used for local data. There are two supported formats:

An array of strings: [ "Choice1", "Choice2" ]

An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

So you wabt to return JSON like:

Array [

  Object {

    "label": "City",

    "value": id

  }

];

Hope that helps.

Update

With your Autocomplete code, this might look like:

HTML

<div class="search-homepage-input">

  {!! Form::open(['route' => 'search.index', 'method' => 'GET']) !!}

  <div class="col-md-9">

    {!! Form::text('city-name', null, array('class' => 'form-control', 'maxlength' =>'55', 'placeholder' => 'Eg. England, London, Manchester', 'id' => 'sl-label')) !!}

    {!! Form::text('city-id', null, array('class' => 'form-control', 'id' => 'sl-id', 'style' => 'display: none;') !!}

  </div>

  <div class="col-md-3">

    {!! Form::submit('Find Teams', array('class' => 'btn btn-homepage'))  !!}

  </div>

  {!! Form::close() !!}

</div>

JavaScript

$('#sl').autocomplete({

  source: "/autocomplete",

  focus: function(event, ui) {

    $("#sl-label").val(ui.item.label);

    return false;

  },

  select: function(event, ui) {

    $("#sl-label").val(ui.item.label);

    $("#sl-id").val(ui.item.value);

    return false;

  }

});

This way you can collect the ID you're looking to use for search.

edited Nov 19 '18 at 22:49

answered Nov 18 '18 at 19:22

Twisty

13.3k11534

So how would i change the autocomplete to send that?

– detinu20
Nov 18 '18 at 22:56

@detinu you would not make the change in autocomplete. This would be a change to your php. Right now you're only sending 'name' data back to autocomplete.

– Twisty
Nov 19 '18 at 16:58

yes - now the drop down is showing the label- name but when i click on a drop down suggestion it enters the id into the box, what i want is the name to be in the box but the value to be the id so that when i fire off my search it can bring back a search based on that id

– detinu20
Nov 19 '18 at 20:06

@detinu ok, that you then need to do in the select callback.

– Twisty
Nov 19 '18 at 20:25

add a comment |

I think you want to do something like the following:

public function autoComplete(Request $request){

  $query = $request->term;

  $res = City::where('name', 'LIKE', "%$query%")->orderBy('name')->paginate(5);

  foreach($res as $cities ){

    $usersArray = array(

      "label" => $cities->name,

      "value" => $cities->id

    );

  }

  return response()->json($usersArray);

}

Review the following page: http://api.jqueryui.com/autocomplete/#option-source

Array: An array can be used for local data. There are two supported formats:

An array of strings: [ "Choice1", "Choice2" ]

An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

So you wabt to return JSON like:

Array [

  Object {

    "label": "City",

    "value": id

  }

];

Hope that helps.

Update

With your Autocomplete code, this might look like:

HTML

<div class="search-homepage-input">

  {!! Form::open(['route' => 'search.index', 'method' => 'GET']) !!}

  <div class="col-md-9">

    {!! Form::text('city-name', null, array('class' => 'form-control', 'maxlength' =>'55', 'placeholder' => 'Eg. England, London, Manchester', 'id' => 'sl-label')) !!}

    {!! Form::text('city-id', null, array('class' => 'form-control', 'id' => 'sl-id', 'style' => 'display: none;') !!}

  </div>

  <div class="col-md-3">

    {!! Form::submit('Find Teams', array('class' => 'btn btn-homepage'))  !!}

  </div>

  {!! Form::close() !!}

</div>

JavaScript

$('#sl').autocomplete({

  source: "/autocomplete",

  focus: function(event, ui) {

    $("#sl-label").val(ui.item.label);

    return false;

  },

  select: function(event, ui) {

    $("#sl-label").val(ui.item.label);

    $("#sl-id").val(ui.item.value);

    return false;

  }

});

This way you can collect the ID you're looking to use for search.

edited Nov 19 '18 at 22:49

answered Nov 18 '18 at 19:22

Twisty

13.3k11534

I think you want to do something like the following:

public function autoComplete(Request $request){

  $query = $request->term;

  $res = City::where('name', 'LIKE', "%$query%")->orderBy('name')->paginate(5);

  foreach($res as $cities ){

    $usersArray = array(

      "label" => $cities->name,

      "value" => $cities->id

    );

  }

  return response()->json($usersArray);

}

Review the following page: http://api.jqueryui.com/autocomplete/#option-source

Array: An array can be used for local data. There are two supported formats:

An array of strings: [ "Choice1", "Choice2" ]

An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

So you wabt to return JSON like:

Array [

  Object {

    "label": "City",

    "value": id

  }

];

Hope that helps.

Update

With your Autocomplete code, this might look like:

HTML

<div class="search-homepage-input">

  {!! Form::open(['route' => 'search.index', 'method' => 'GET']) !!}

  <div class="col-md-9">

    {!! Form::text('city-name', null, array('class' => 'form-control', 'maxlength' =>'55', 'placeholder' => 'Eg. England, London, Manchester', 'id' => 'sl-label')) !!}

    {!! Form::text('city-id', null, array('class' => 'form-control', 'id' => 'sl-id', 'style' => 'display: none;') !!}

  </div>

  <div class="col-md-3">

    {!! Form::submit('Find Teams', array('class' => 'btn btn-homepage'))  !!}

  </div>

  {!! Form::close() !!}

</div>

JavaScript

$('#sl').autocomplete({

  source: "/autocomplete",

  focus: function(event, ui) {

    $("#sl-label").val(ui.item.label);

    return false;

  },

  select: function(event, ui) {

    $("#sl-label").val(ui.item.label);

    $("#sl-id").val(ui.item.value);

    return false;

  }

});

This way you can collect the ID you're looking to use for search.

edited Nov 19 '18 at 22:49

answered Nov 18 '18 at 19:22

Twisty

13.3k11534

edited Nov 19 '18 at 22:49

answered Nov 18 '18 at 19:22

Twisty

13.3k11534

answered Nov 18 '18 at 19:22

Twisty

13.3k11534

answered Nov 18 '18 at 19:22

Twisty

13.3k11534

So how would i change the autocomplete to send that?

– detinu20
Nov 18 '18 at 22:56

@detinu you would not make the change in autocomplete. This would be a change to your php. Right now you're only sending 'name' data back to autocomplete.

– Twisty
Nov 19 '18 at 16:58

yes - now the drop down is showing the label- name but when i click on a drop down suggestion it enters the id into the box, what i want is the name to be in the box but the value to be the id so that when i fire off my search it can bring back a search based on that id

– detinu20
Nov 19 '18 at 20:06

@detinu ok, that you then need to do in the select callback.

– Twisty
Nov 19 '18 at 20:25

add a comment |

So how would i change the autocomplete to send that?

– detinu20
Nov 18 '18 at 22:56

@detinu you would not make the change in autocomplete. This would be a change to your php. Right now you're only sending 'name' data back to autocomplete.

– Twisty
Nov 19 '18 at 16:58

yes - now the drop down is showing the label- name but when i click on a drop down suggestion it enters the id into the box, what i want is the name to be in the box but the value to be the id so that when i fire off my search it can bring back a search based on that id

– detinu20
Nov 19 '18 at 20:06

@detinu ok, that you then need to do in the select callback.

– Twisty
Nov 19 '18 at 20:25

So how would i change the autocomplete to send that?

– detinu20
Nov 18 '18 at 22:56

@detinu you would not make the change in autocomplete. This would be a change to your php. Right now you're only sending 'name' data back to autocomplete.

– Twisty
Nov 19 '18 at 16:58

yes - now the drop down is showing the label- name but when i click on a drop down suggestion it enters the id into the box, what i want is the name to be in the box but the value to be the id so that when i fire off my search it can bring back a search based on that id

– detinu20
Nov 19 '18 at 20:06

@detinu ok, that you then need to do in the select callback.

– Twisty
Nov 19 '18 at 20:25

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu