jQuery - separare valori din json in id-uri


#1

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!


#2

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!


(Ionuț Staicu) #3

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.


(Eduard-Dan Stanescu) #5

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;
    }
});

});

#6

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)


(Eduard-Dan Stanescu) #7

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


#8

functioneaza, multumesc mult!