All geek questions in one place

How to pass dynamic id value in jquery i get from json?

I got the values ​​from json and went into the autocomplete search field.

[{"id":1,"name":"JAVA"},{"id":2,"name":"cake PHP"},"id":3,"name":"Android"}]

For example, when I press the JAVA button, I want to get the JAVA ID, for example, www.example.com/1

JQuery Code:

 <script> $('#search').typeahead({ ajax: '/searchendpoint/search', onSelect: function() { window.location = "/home/view/" + $(this).val().id; } }); </script>
+5
source share
9 answers

If you want to use an array of objects as a source, you need to provide logic for:

  • which property of the object to use to match user input
  • which property to use to display the text of the corresponding elements
  • which property to use when the user selects an item

Additional Information:

 var tags = [ {"id":1,"name":"JAVA"}, {"id":2,"name":"cake PHP"}, {"id":3,"name":"Android"} ]; $( "#search" ).autocomplete({ source: function( request, response ) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" ); response( $.grep( tags, function( item ){ return matcher.test( item.name ); // match user request with item.name }) ); }, select: function( event, ui ) { event.preventDefault(); $("#search").val( ui.item.name ); // display user selection in textbox console.log('selected: ' + JSON.stringify(ui) ); console.log('execute window.location = "example.com/' + ui.item.id + '"'); // use id of the selected item to generate required URL } }); // provide rendering logic for each matched item $w = $( "#search" ).data("ui-autocomplete"); $w._renderItem = function( ul, item ) { //console.log(JSON.stringify(item) ); return $( "<li>" ) .attr( "data-value", item.id ) .append( item.name ) .appendTo( ul ); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <input id="search">

Edit : Using typeahead.js as per your comment.

 var data = [ {"id":1,"name":"JAVA"}, {"id":2,"name":"cake PHP"}, {"id":3,"name":"Android"} ]; $(function(){ var substringMatcher = function(strs) { return function(q, cb) { var matches, substringRegex; // an array that will be populated with substring matches matches = []; // regex used to determine if a string contains the substring `q` substrRegex = new RegExp(q, 'i'); // iterate through the pool of strings and for any string that // contains the substring `q`, add it to the `matches` array $.each(strs, function(i, str) { if (substrRegex.test(str.name)) { matches.push(str); } }); cb(matches); }; }; $('.typeahead').bind('typeahead:select', function(ev, suggestion) { console.log('Selection: ' + JSON.stringify(suggestion) ); console.log('execute window.location = "example.com/' + suggestion.id + '"'); }); // passing in `null` for the `options` arguments will result in the default // options being used $('.typeahead').typeahead({ hint: true, minLength: 1 }, { source: substringMatcher(data), display: 'name' }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://twitter.imtqy.com/typeahead.js/releases/latest/typeahead.bundle.js"></script> <div id="prefetch"> <input class="typeahead" type="text" placeholder=""> </div>

Additional Information:

+3
source

Follow the solution below.

HTML

 <select id="search"> <option value="1">JAVA</option> <option value="2">cake PHP</option> <option value="3">Android</option> </select>

Javascript

 document.addEventListener('change', function(){ window.location = "www.example.com/" + document.getElementById('search').value; })
+1
source

Try it. Add an event selection for autocomplete binding.

 $(function () { var availableTags = [ {"id":1,"value":"JAVA"}, {"id":2,"value":"cake PHP"}, {"id":3,"value":"Android"} ]; $("#search").autocomplete({ source: availableTags, select: function(event, ui) { window.location = "www.example.com/" + ui.item.id; } }); });
+1
source

I'm not sure I understand your question, but do you mean something like this?

JSON:

 [{"id":1,"name":"JAVA"},{"id":2,"name":"cake PHP"},"id":3,"name":"Android"}]

JQuery

 <script> var url = "http://example.com/"; $('#search').change(function() { window.location = url + $(this).val().id; }); </script>
+1
source

onSelect the pass item function as a variable that you can use in the select event, and a structure similar to the one below.

 { value: "1", text: "Toronto" }

and try below code

 <script> $('#search').typeahead({ ajax: '/searchendpoint/search', onSelect: function(item) { //console.log(item); window.location = "/home/view/" + item.value; } }); </script>
+1
source 
 var data = [{ "id": 1, "name": "JAVA" }, { "id": 2, "name": "cake PHP" }, { "id": 3, "name": "Android" }] var data_text = []; var data_obj = []; $.each(data, function(index, _data) { data_text.push(_data.name); data_obj[_data.name] = _data; }); $('#search').typeahead({ source: data_text, updater: function(item) { alert(data_obj[item].id) window.location = "/home/view/" + data_obj[item].id; } });
+1
source

This is almost the same answer as Vevik, but a just-adjusted version of what I really wanted and tried to do. I tested it.

 <html> <head> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function(){ var data = [{ "id": 1, "name": "JAVA" }, { "id": 2, "name": "cake PHP" }, { "id": 3, "name": "Android" }]; var data_labels = []; var data_dictionay = []; $.each(data, function(index, _data) { data_labels.push(_data.name); data_dictionay[_data.name] = _data.id; }); $('#search').autocomplete({ source : data_labels, select: function(ui, item) { if(data_dictionay[item.item.value]){ window.location = "/home/view/" + data_dictionay[item.item.value]; } } }); }); </script> </head> <body> <input id="search" type="text"> </body> </html>
+1
source

I don't know what type you used, but I'm trying to make an example. Try this:

 $('#my-autoc').typeahead({ name: 'search', remote: { url: 'https://suggestqueries.google.com/complete/search?client=chrome&q=%QUERY', dataType: 'jsonp', cache: false, filter: function(parsedResponse){ return (parsedResponse.length > 1) ? parsedResponse[1] : [] ; } } }).on('typeahead:selected', function(e, data){ // its example //window.location = "http://www.example.com/" + data.value console.log("window.location = \"http://www.example.com/" + data.value + "\"") // for your code // window.location = "http://www.example.com/" + data.id }); 
 @import url('https://getbootstrap.com/dist/css/bootstrap.css'); @import url('https://rawgithub.com/jharding/typeahead.js-bootstrap.css/master/typeahead.js-bootstrap.css'); body{ padding: 20px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://rawgithub.com/zeMirco/typeahead.js/master/dist/typeahead.min.js"></script> <form id="my-form"> <input class="form-control" name="search" type="text" placeholder="type something ..." id="my-autoc"> <br> </form>
+1
source

Bootstrap typeahead uses the label and value properties.

Try matching your current array before passing it to typeahead.

 results.map((item) => { return { "label": item.name, "value": item.id } }
0
source

Source: https://habr.com/ru/post/1272869/

More articles:


All Articles