オートコンプリートで結果が得られません

オートコンプリートスクリプトに問題があります。スクリプトは入力の際に名前を与えません。ここはインデックスです：オートコンプリートで結果が得られません

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

そしてここでは、DBへの接続 bla.phpあるDBからデータが正しい、正しいです。

ajaxには、コンソールログがあり、これはcoorect値を返します。例えば、私が入力Terに挿入してconsole.logに入れた場合、コンテンツ：["Terrence Rowell"、 "Terry Moony"、 "Terry Morco" 、 "Terry Morco"]。それはすべての正しいデータですが、何もスクリプトは自動補完ボックスに書き込まれません。ときに、私は配列のデータをjavascritで、すべての作品が、私はPHPのスクリプトから配列を挿入する私はオートコンプリートボックスがありません。あなたは...代わりに、1つの文字列の文字で文字としてJSONエンコード値ので、スプリット機能の仕事を返すので、JSONとしてデータ型を与える必要があるため Box when I write first letter

出典

2017-08-14 Kniha man

コンソールにエラーが表示されますか？あなたの投稿のスペルを修正して、ユーザーのために簡単にしてください。 – Script47

コンソールにエラーはありません。 –

jQueryをDOMの下にロードするか、 'DOMContentLoaded' /' document.ready'でラップしてください。 – Script47

：ここ

はスクリーンショットです。

EXのためのあなたのAjaxリクエストに入力データを追加します。この

$.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

データ型json ajax返信エラーメッセージ：parserror。 –

この 'parserror'メッセージが出るのは、単に文字列や別の値を返すだけでは、実際には' Json'ではないので、パーサーが解析されて失敗するからです。 – Nawin

データベースThaliaLibertézの名前です。 –

よう dataType: "json",はあなたをチェック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

私は両方のparsererrorを持っています。 –

オートコンプリートで結果が得られません

答えて

関連する問題