jQuery - separare valori din json in id-uri

Salutare,

Am un livesearch ajax, php, mysql care este format din urmatoarele:

am un json din php de forma:

{
"421": {
		"nume_j": "SC CLIENT 1 SRL",
		"nume_f": "Nume contact cl 1.",
		"localitate": "Oradea"
	},
"866": {
		"nume_j": "Sc CLIENT 2 SRL",
		"nume_f": "Nume contact cl 2",
		"localitate": "Brasov"
	},
.....

}

am acest cod html:

<input type="text" name="client" id="client" class="form-control input-lg" autocomplete="off" placeholder="Numele clientului" />
    <input type="text" id="id_client" >
<div id="localitate" ></div>


<script>
    $(document).ready(function(){

        $('#client').typeahead({
            source: function(query, result)
            {
                $.ajax({
                    url:"clienti_json_inc.php",
                    method:"POST",
                    data:{query:query},
                    dataType:"json",
                    success:function(data)
                    {
                        result($.map(data, function(elem, index){
                            $('#id_client').val(index);
                            console.log(index);
                            return elem.nume_j;
                        }));
                    }
                })
            }
        });

    });
</script>

O varianta demo se poate vizualiza aici:

Ceea ce nu reusesc este sa preiau unul din indexurile (ex: 421, 866, …) in functie de aceea ce se alege in inputul cu id=“client” si sa il introduc in inputul id=“id_client”, la fel incerc si pentru div-ul cu id=“localitate”.

In codul meu in result in linia de cod: $(’#id_client’).val(index); imi insereaza ultimul index identificat la prima litera introdusa, pe cand eu doresc sa inserez in input indexul clientului selectat.

Multumesc!

1 Like

Revin la acesta problema, inca nu am reusit sa ii dau de cap, poate cineva de aici este mai invatat si ma poate ajuta. Multumesc!

Tu vrei să schimbi valoarea inputului atunci când utilizatorul selectează un rezultat, nu atunci când caută. Prin urmare, vrei să te legi de un event al Typeahead, mai exact fix ce ai în exemplul din documentație:

$('.typeahead').bind('typeahead:select', function(ev, suggestion) {
  console.log('Selection: ' + suggestion);
});

Eu nu am folosit niciodată typeahead, deci habar n-am ce conține obiectul ăla, dar consider că e un punct de plecare.

Hai sa-ti dau solutia ca plangi langa cod. :troll:

<input type="text" name="client" id="client" class="form-control input-lg" autocomplete="off" placeholder="Numele clientului" />
<input type="text" id="id_client" >
<input type="text" id="localitate" >
$(document).ready(function(){

	$('#client').typeahead({
    source: function(query, result)
    {
    	$items = [];
        $.ajax({
            url:"clienti_json_inc.php",
            method:"POST",
            data:{query:query},
            dataType:"json",
            success:function(data)
            {
                $.map(data, function(elem, index){
                    var group;
                    group = {
                    	id: index,
                    	name: elem.nume_j,
                    	localitate: elem.localitate
                    };
                    $items.push(group);
                });
                result($items);
                $items = [];
            }
        })
    },
    updater: function(data){
    	$('#id_client').val(data.id);
    	$('#localitate').val(data.localitate);
        return data.name;
    }
});

});
2 Likes

am testat codul insa in consola primesc urmatoare eroare

Uncaught TypeError: it.toLowerCase is not a function
at Typeahead.matcher (bootstrap3-typeahead.min.js:1)
at bootstrap3-typeahead.min.js:1
at Function.grep (jquery.min.js:2)
at Typeahead.process (bootstrap3-typeahead.min.js:1)
at e (jquery.min.js:2)
at Object.success (chest_mfr.php:71)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at A (jquery.min.js:4)
at XMLHttpRequest. (jquery.min.js:4)

Aici ai scriptul live: https://jsfiddle.net/ZsharE/4oww3eLk/
Te descurci.

2 Likes

functioneaza, multumesc mult!