Separare valori din json in livesearch jQuery

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
sterica
Mesaje: 260

Separare valori din json in livesearch jQuery

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

am un json din php de forma:

Cod: Selectaţi tot

{
"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:

Cod: Selectaţi tot

<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:
webslesson.info/2017/04/dynamic-autocomplete-search-using-bootstrap-typeahead-with-php-ajax.html

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!

MarPlo
Ce se alege in inputul cu id=“client”, ce legatura e intre acea valoare si json-ul de la php?

In functia de la "result" vezi ce date apar in consola la:

Cod: Selectaţi tot

console.log(index);
Si:

Cod: Selectaţi tot

console.log(elem);
- Poate indica cum sa preiei datele care vrei.

sterica
pentru:

Cod: Selectaţi tot

console.log(index);
consola imi returneaza index-urile
iar

Cod: Selectaţi tot

console.log(elem);
imi returneaza:

Cod: Selectaţi tot

{
nume_j: "....",
nume_f: ".....",
localitate: "...."
}
{
.....
}

MarPlo
Ce legatura e intre valoarea de la #client si json-ul de la php?
Unde gasesti ce e la $client in json?

sterica
In #client caut nume_j din json-ul oferit de php

MarPlo
Incearca asa in functia de la $.map():

Cod: Selectaţi tot

if($('#client').val()== elem.nume_j) $('#id_client').val(index);

sterica
functioneaza doar prima parte in care din json aduce doar numele clientului nume_j
in #id_client nu se completeaza nimic.
- ma tot chinui cu problema asta, nu reusesc sa ii dau de cap.

MarPlo
La problema asta nu am alte idei sa te ajut.
- Incearca si pe alte forumuri cu experienta in javascript /jquery.

sterica
am primit un raspuns pe al forum si il postez aici pentru cei care se vor mai intalni cu problema mea

Cod: Selectaţi tot

<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" >

Cod: Selectaţi tot

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

});

Subiecte similare