自動完成不會給出結果

我有自動完成腳本的問題。腳本在輸入時不提供任何名稱。這裏是指數：自動完成不會給出結果

<head> 
     <html lang="en"> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>jQuery UI Autocomplete - Multiple values</title> 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
     <link rel="stylesheet" href="/resources/demos/style.css"> 
     <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 getData(){ 
     var userName = document.getElementById("tags"); 
     var string = userName.value; 
     $.ajax({ 
        method: 'POST', 
        url: 'bla.php', 
        data: { 
        str: string 
        }, 
        success: function(content) { 
        console.log("Content: " + content); 

     var availableTags = content; 
     function split(val) { 
      return val.split(/,\s*/); 
     } 
     function extractLast(term) { 
      return split(term).pop(); 
     } 

     $("#tags").autocomplete({ 
      minLength: 0, 
      source: function(request, response) { 
       // delegate back to autocomplete, but extract the last term 
       response($.ui.autocomplete.filter(
       availableTags, extractLast(request.term))); 
      }, 
      focus: function() { 
       // prevent value inserted on focus 
       return false; 
      }, 
      select: function(event, ui) { 
       var terms = split(this.value); 
       // remove the current input 
       terms.pop(); 
       // add the selected item 
       terms.push(ui.item.value); 
       // add placeholder to get the comma-and-space at the end 
       terms.push(""); 
       this.value = terms.join(", "); 
       return false; 
      } 
      }); 
        }, 
        error: function(xhr, status) { 
        console.log("ERROR"); 
        } 
       }); 


     } 
     </script> 
    </head> 
    <body> 

    <div class="ui-widget"> 
     <label for="tags">Names: </label> 
     <input id="tags" size="50" onKeyDown="getData();"> 
    </div> 


    </body> 
    </html>

這裏是bla.php 連接到數據庫是正確的，從數據庫數據是正確的。

$d = new Database(); 
$d->query("SELECT u.cele_jmeno, u.id FROM uzivatele u WHERE u.cele_jmeno LIKE CONCAT(:str,'%') ORDER BY u.cele_jmeno LIMIT 0,15"); 
$d->bind(":str", $_POST["str"]); 
$vysledky = $d->resultset(); 
$res = Array(); 
$num = 0; 
foreach($vysledky AS $vysledek){ 
    $res[$num] = $vysledek["cele_jmeno"]; 
    $num++; 

} 
    echo json_encode($res);

在ajax我有控制檯日誌，哪個返回coorect值。例如，如果我inser輸入Ter，然後在console.log我有：內容：[「Terrence Rowell」，「Terry Moony」，「Terry Morco」]，如果我插入特里我只有內容：[「Terry Moony」，「Terry Morco」]。這是完全正確的數據，但是，腳本沒有寫入自動填充框。什麼時候，我有javascrit數組中的數據，所有的作品，但如果我從PHP腳本插入數組我沒有自動填充框。

下面是截圖： Box when I write first letter

來源

2017-08-14 Kniha man

控制檯是否顯示任何錯誤？請修復您的帖子拼寫，以便使用戶更容易。 – Script47

我在控制檯中沒有任何錯誤。 –

在DOM下載入你的jQuery或者在'DOMContentLoaded' /'document.ready'中包裝，看看是否有幫助。 – Script47

因爲你通過信函，而不是一個字符串返回一個JSON編碼值，分割功能工作的信......所以需要給的dataType爲JSON。

添加數據類型爲你的Ajax請求，例如： dataType: "json",這樣

$.ajax({ 
method: 'POST', 
url: 'bla.php', 
dataType: "json", 
data: { 
     str: string 
}, etc...

我test1.php

<head> 
     <html lang="en"> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>jQuery UI Autocomplete - Multiple values</title> 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
     <link rel="stylesheet" href="/resources/demos/style.css"> 
     <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 getData(){ 
     var userName = document.getElementById("tags"); 
     var string = userName.value; 
     $.ajax({ 
        method: 'POST', 
        url: 'test.php', 
        dataType: "json", 
        data: { 
        str: string 
        }, 
        success: function(content) { 
        console.log("Content: " + content); 

     var availableTags = content; 
     function split(val) { 
      return val.split(/,\s*/); 
     } 
     function extractLast(term) { 
      return split(term).pop(); 
     } 

     $("#tags").autocomplete({ 
      minLength: 0, 
      source: function(request, response) { 
       // delegate back to autocomplete, but extract the last term 
       response($.ui.autocomplete.filter(
       availableTags, extractLast(request.term))); 
      }, 
      focus: function() { 
       // prevent value inserted on focus 
       return false; 
      }, 
      select: function(event, ui) { 
       var terms = split(this.value); 
       // remove the current input 
       terms.pop(); 
       // add the selected item 
       terms.push(ui.item.value); 
       // add placeholder to get the comma-and-space at the end 
       terms.push(""); 
       this.value = terms.join(", "); 
       return false; 
      } 
      }); 
        }, 
        error: function(xhr, status) { 
        console.log("ERROR"); 
        } 
       }); 


     } 
     </script> 
    </head> 
    <body> 

    <div class="ui-widget"> 
     <label for="tags">Names: </label> 
     <input id="tags" size="50" onKeyDown="getData();"> 
    </div> 


    </body> 
    </html>

和我的test.php的

<?php 
$vysledky = ["Terry Moony","Terry Morco","window","Libertéz"]; 
$num = 0; 
foreach($vysledky AS $vysledek){ 
    //print_r($vysledek); 
    $res[$num] = $vysledek; 
    $num++; 

} 

echo json_encode($res); 

?>

來源

2017-08-14 10:30:30 Nawin

用dataType json ajax返回錯誤信息：parserror。 –

發生這個'parserror'消息的原因是，當你簡單地返回一個字符串或其他值時，它不是真的'Json'，所以解析器在解析時失敗 – Nawin

它是數據庫ThaliaLibertéz的名字。 –

檢查你的PHP版本，並相應地使用片段，

if php version>=5.4 
<?php 
$vysledky = ["Terry Moony","Terry Morco","window","Libertéz"]; 
$num = 0; 
foreach($vysledky AS $vysledek){ 
    $res[$num] = $vysledek; 
    $num++; 
} 
echo json_encode($res,JSON_UNESCAPED_UNICODE); 
?> 

Before PHP 5.4, you can use this snippet: 

<?php 
$vysledky = ["Terry Moony","Terry Morco","window","Libertéz"]; 
$num = 0; 
foreach($vysledky AS $vysledek){ 
    $res[$num] = $vysledek; 
    $num++; 
} 
$holder = json_encode($res); 
$holder = preg_replace_callback('/\\\\u([0-9a-f]{4})/i', function($matches) {return mb_convert_encoding(pack('H*', $matches[1]), 'UTF-8', 'UTF-16');}, $holder); 

?>

來源

2017-08-14 11:49:53

我有兩個parseError。 –

自動完成不會給出結果

回答

相關問題