Jquery autocomplete viac inputov

Fórum › JavaScript, AJAX, jQuery

Anonym5789545

~ Anonymní uživatel
~ 1 příspěvek

2. 12. 2017 #1

Ahojte,

postupne sa učím Javascript a Jquery a podarilo sa mi rozchodiť základné autocomplete. Kde sa výraz vyhľadáva cez databázu. Všetko mi funguje, ako má, ale zaujímalo by ma nasledovné:

Po výbere prvku z autocomplete by som chcel, aby sa do ďalšieho voľného inputu s id="pocet" vybrala položka s počtom z DB a vložila do daného inputu.

Tzn. vyberiem si položku z autocomplete a do id="nazov" sa priradí $row['nazov'] a do inputu s id="pocet" sa priradí $row['pocet']. Uvažoval som vytvoriť nové $data2 ale keďže by to returnovalo naraz, tak to asi moc zmysel nemá.

Pred predstavu čo mám hotové, prikladám scripty.

Veľká vďaka za pomoc.

index.php

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#nazov" ).autocomplete({
		minLength: 5,
      source: 'hladaj.php'
    });
  });
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="nazov">Názov: </label>
  <input id="nazov">
  <input id="pocet">
</div>
</body>
</html>

hladaj.php

<?php
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'databaza';
//connect with the database
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
$db->set_charset("utf8");
//get search term
$searchTerm = $_GET['term'];
//get matched data from skills table
$query = $db->query("SELECT * FROM polozky WHERE nazov LIKE '%".$searchTerm."%'");
while ($row = $query->fetch_assoc()) {
    $data[] = $row['nazov'];
}
//return json data
echo json_encode($data);

?>

Nahlásit jako SPAM

IP: 95.105.210.–

gna

~ Anonymní uživatel
~ 1891 příspěvků

2. 12. 2017 #2

Můžeš definovat vlastní funkci pro select a tam doplnit zbývající data. A source může být i funkce, takže by šlo i to, že stáhneš všechno a vybereš, co půjde do nabídky a při selectu použiješ zbytek.

$(function() {
  var data = {prvni: 11, druhy: 22, treti: 33};

  $( "#nazov" ).autocomplete({
    minLength: 3,
    source: function(request, response) {
      // muzes ajaxem stahnout data
      // ja pouziju ten preddefinovany objekt
      var keys = Object.keys(data);
      console.log(keys);
      response(keys);
    },
    select: function(event, ui) {
      var key = ui.item.value;
      var val = data[key];
      console.log(key, val);
      $( "#pocet" ).val(val);
    }
  });
});

Nahlásit jako SPAM

IP: 213.211.51.–

ANonym55868655

~ Anonymní uživatel
~ 5 příspěvků

3. 12. 2017 #3

#2 gna

Vďaka, pozriem sa na to :)

Nahlásit jako SPAM

IP: 95.105.210.–

ANonym55868655

~ Anonymní uživatel
~ 5 příspěvků

3. 12. 2017 #4

#2 gna

Nejaký nápad, ako to danej var data pridať odpoveď z hladaj.php, ako som to mal dovtedy? Štruktúru výpisu som zmenil, ale toto neviem ako zapísať, resp. ako to správne priradiť.

Ďakujem.

Nahlásit jako SPAM

IP: 95.105.210.–

gna

~ Anonymní uživatel
~ 1891 příspěvků

3. 12. 2017 #5

Tím AJAXem. Tady jsem to napatlal tak, že ze serveru příjde pole objeků. Do nabídky půjdou indexy s popisem <nazov> a při selectu se data doplní z toho pole.

$(function() {
  var lastData = []; // [{nazov: 'aa', pocet: 11}, {nazov: 'ab', pocet: 12}];

  $( "#nazov" ).autocomplete({
    minLength: 1,
    source: function(acRequest, acResponse) {
      lastData = []; // zrusit stara data
      $.ajax({ // ajaxem nacist nova data pro autocomplete.
        url: "hladaj.php",
        dataType: "json",
        data: {
          term: acRequest.term
        },
        success: function(ajaxResponse) { // ajax uspesny. ulozit data.
          lastData = ajaxResponse;
        },
        complete: function() { // ajax dokonceny. uspesne nebo s chybou.
          var completions = []; // z dat vytvorit moznosti pro autocomplete.
          for(var i = 0; i < lastData.length; i++) {
            completions.push({label: lastData[i].nazov, value: i}); // value bude index
          }
          acResponse(completions);
        }
      });
    },
    select: function(event, ui) {
      var item = lastData[ui.item.value]; // value je index
      ui.item.value = item.nazov; // zmenit na nazov
      $( "#pocet" ).val(item.pocet); // dalsi data
      return true;
    }
  });
});

Nahlásit jako SPAM

IP: 213.211.51.–

ANonym55868655

~ Anonymní uživatel
~ 5 příspěvků

3. 12. 2017 #6

#5 gna
Vďaka, dlhšie som sa hral s tým a asi bude fajn, ak to načítam celé dopredu a nebudem musieť stále posielať requesty a tak som to spravil takto:

  <script>
$(function() {
  var data =  {<?php  while ($row = $query->fetch_assoc()) {echo ('"'.$row['nazov'].': '.$row['pocet'].'",');} ?>};

  $( "#nazov" ).autocomplete({
    minLength: 3,
    source: function(request, response) {
      // muzes ajaxem stahnout data
      // ja pouziju ten preddefinovany objekt
      var keys = Object.keys(data);
      console.log(keys);
      response(keys);
    },
    select: function(event, ui) {
      var key = ui.item.value;
      var val = data[key];
      console.log(key, val);
      $( "#pocet" ).val(val);
    }
  });
});
  </script>

Problém ale je fakt, že to nechce fungovať s názvami, čo majú v sebe medzeru. Stále problém s UnExpected token ,... Problém som vyriešil len podtržníkom, ale popravde pri vyhľadávaní to nevyzerá vôbec dobre... Keďže všetky autocomplete položky vypisuje s podtržníkom a teda... Položka_1 Nejaká_nová_položka a pod.

Je to možné nejako jednoducho ošetriť?

Mám na mysli toto:

Připojen obrázek.

https://ctrlv.sk/jYOv

Ďakujem za pomoc.

Nahlásit jako SPAM

IP: 95.105.210.–

ANonym55868655

~ Anonymní uživatel
~ 5 příspěvků

4. 12. 2017 #7

#6 ANonym55868655

Vyriešené cez zápis:

"Položka": "Počet"

Nahlásit jako SPAM

IP: 95.105.210.–

ANonym55868655

~ Anonymní uživatel
~ 5 příspěvků

4. 12. 2017 #8

#5 gna

Aj keď definujem do lastData[] položky z komentáru tzn:

lastData = [{nazov: 'aa', pocet: 11}, {nazov: 'ab', pocet: 12}];

Tak to pri vpisovaní ukáže len "0" a nič viac sa nedeje.

Výstup z hľadaj je napr. pre term="polo":

["\"Polo\u017eka 1\": \"30\",","\"Polo\u017eka 2\": \"50\",","\"Polo\u017eka 3\": \"10\",","\"Polo\u017eka 4\": \"30\",","\"Polo\u017eka pre FID 19\": \"30\","]

v json_encode

neviem či v tom je chyba, alebo niečo v inom.

Ďakujem.

Nahlásit jako SPAM

IP: 95.105.210.–

gna

~ Anonymní uživatel
~ 1891 příspěvků

4. 12. 2017 #9

php:

$query = $db->query("SELECT nazov, pocet FROM...
while ...
    $data[] = $row;

json:

[{"nazov":"aa","pocet":1},{"nazov":"bb","pocet":2}]

A v tom PHP pozor na to sestavování SQL dotazu. Podívej se co je "sql injection" a jak se používají "prepared statements".

Nahlásit jako SPAM

IP: 213.211.51.–

← Zpět na seznam vláken ← Zpět do Fóra

Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku

Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.

Jméno: *

Twitter: bez zavináče

Avatar:

Podporujeme Gravatara.

Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.

Tvůj text: *

Zdrojový kód Vložit obrázek Video Smajlíci

Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.

Sledovat nové příspěvky (pouze pro přihlášené)

Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.

Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 18 hostů

Podobná vlákna

Fórum › JavaScript, AJAX, jQuery