JQuery Autocomplete с заявлениями PDO

-1

Мне сложно найти эту ошибку. Я провел около 10 часов поиска и тестирования, но google не мог предоставить мне ничего. Итак, вы, ребята, моя последняя надежда. У меня есть простой HTML текстовое поле:JQuery Autocomplete с заявлениями PDO

<input type="text" value="" id="keyword" name="zip" placeholder="Please enter ZIP code" required>

и вот мой код Javascript (файлы JQuery связаны правильно, не волнуйтесь):

var MIN_LENGTH = 2; 
    $(document).ready(function() { 
     $("#keyword").keyup(function() { 
      var keyword = $("#keyword").val(); 
      if (keyword.length >= MIN_LENGTH) { 
       $.get("autocomplete", { keyword: keyword }) 
        .done(function(data) { 
         console.log(data); 
        }); 
      } 
     }); 
    });

Когда я набираю в текстовом поле значение «sw» Я получаю следующий результат в консоли:

["Swaziland\r","Sweden\r","Switzerland\r"]

Что должно быть правильно. Вот мой первый вопрос. Является ли «\ r» нормальным? И мой второй и более важный вопрос: как добавить функцию автозаполнения запроса? Моя цель была бы такой, как в следующем примере: https://jqueryui.com/autocomplete/

Пожалуйста, помогите мне, я проверил вокруг так долго, и я не могу найти решение. И я думаю, что это немного глупая ошибка. Здесь все файлы:

autocomplete.php

if (!isset($_GET['keyword'])) { 
    die(); 
} 
$keyword = $_GET['keyword']; 
$data = SQL::searchForKeyword($keyword); 
echo json_encode($data);

функция searchForKeyword:

static function searchForKeyword($keyword) { 
    $stmt = self::getInstance()->_conn->prepare("SELECT NameCountry as countries FROM `country` WHERE NameCountry LIKE ? ORDER BY countries"); 
    $keyword = $keyword . '%'; 
    $stmt->bindParam(1, $keyword, PDO::PARAM_STR, 100); 
    $isQueryOk = $stmt->execute(); 
    $results = array(); 
    if ($isQueryOk) { 
     $results = $stmt->fetchAll(PDO::FETCH_COLUMN); 
    } else { 
     trigger_error('Error executing statement.', E_USER_ERROR); 
    } 
    return $results; 
}

источник

2016-10-18 jor

Вещь с Ui документации JQuery, чтобы найти нужную страницу.
Что вам нужно, это пример Remote jsonp datasource.

Я потерял много времени на remote datasource примере (Wich я даже не был в состоянии работать), потому что я был напуган на «р» ...

Так here is my version, немного повышается, примера для динамической загрузки выпадающего списка автозаполнения.
Надеюсь, это поможет многим людям.

Самое смешное, что я не использовал jsonp, как предлагает документация по jQuery.
Это создает странную непонятную ошибку в консоли:

Error: jQuery112409377035747123055_1476875409950 was not called(…)

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>jQuery UI Autocomplete - Remote datasource</title> 
     <link rel="icon" type="image/gif" href="https://www.bessetteweb.com/cube-fallback/images/sept.gif"> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> 

     <style> 
      .ui-autocomplete-loading { 
       background: white url("ajax-loader.gif") right center no-repeat; 
      } 
      .ui-widget{ 
       width:500px; 
      } 
      .ui-front{ 
       width:10em; 
       background-color:#bebebe; 
      } 
      #log{ 
       height: 200px; 
       width: 500px; 
       overflow: auto; 
      } 
      #noResult{ 
       display:none; 
       color:red; 
       padding-left:1em; 
      } 
     </style> 
     <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() { 
       function log(message){ 
        $("<div>").text(message).appendTo("#log"); 
        $("#UScities").blur(); 
       } 

       $("#UScities").autocomplete({ 
        source: function(request, response) { 

         $.ajax({ 
          url: "search.php", 
          data: {keyword:request.term}, 
          dataType: 'json',    // DON'T use jsonp ! 
          cache: false, 
          success: function(data){ 

           console.log(data); 

           // Even on success, it may have no results... 
           if(typeof(data[0])!="undefined"){ 

            // Remove the no result error in case it's displayed 
            $("#noResult").css("display","none"); 

            // For fun, count it! 
            var count = 0; 
            while (data[count]) { 
             console.log(data[count]); 
             count++; 
            } 
           }else{ 
            count = "NO"; 
            // Display the no result error 
            $("#noResult").css("display","inline"); 
           } 

           console.log(count+" RESULTS"); 

           // Pass the data to the dropdown! 
           response(data); 
          }, 
          error: function(jqXHR, textStatus, errorThrown){ 
           console.log(errorThrown); 
          } 
         }); 

        }, 
        minLength: 4, 
        select: function(event, ui) { 
         log(ui.item.value); 
        } 
       }); 

       // Show results on input focus 
       $("#UScities").on("focus",function(){ 
        $("#ui-id-1").css("display","block"); 
       }); 
      }); 

     </script> 
    </head> 
    <body> 

     <div class="ui-widget"> 
      <label for="UScities">USA cities: </label> 
      <input type="text" id="UScities"><span id="noResult">No Result</span><br> 
     </div> 

     <div class="ui-widget" style="margin-top:2em; font-family:Arial"> 
      <div id="log" class="ui-widget-content"></div> 
     </div> 

    </body> 
</html>

я добавил счетчик результата в консоли (которая может быть использована для запуска что-то) и «НЕТ RESULT "пользователю, поскольку невозможно получить результат при поиске по ключевым словам.

Теперь, что не хватает в документации jQuery, заключается в том, как создать выход json.

<?php 
if (!isset($_GET['keyword'])) { 
    // Do nothing if no keyword! 
    die(); 
} 

// Database connection infos (PDO). 
$dsn = 'mysql:dbname=[Database Name];host=localhost'; 
$user = '[Database User]'; 
$password = '[UserPassword]'; 

try { 
    $dbh = new PDO($dsn, $user, $password); 
} catch (PDOException $e) { 
    echo 'Connexion failed : ' . $e->getMessage(); 
} 

// Getting the keyword and add % to get data that begins with it. 
$keyword = $_GET['keyword'] . '%'; 

// If you want the keyword to be "contained" in the data, use (uncomment it): 
//$keyword = '%' . $_GET['keyword'] . '%'; 

// Query. 
$query = "SELECT city FROM SO_USAzipcodes WHERE city LIKE ? GROUP BY city limit 30"; 

$stmt = $dbh->prepare($query); 
$stmt->bindParam(1, $keyword); 

// Executing. 
$stmt->execute(); 

// If SQL error... 
if (!$stmt) { 
    echo "\nPDO::errorInfo():\n"; 
    print_r($dbh->errorInfo()); 
    die(); 
} 

// Fetching. 
$data = array(); 
$data = $stmt->fetchAll(PDO::FETCH_COLUMN); 

// This is sending the json to autocomplete. 
echo json_encode($data); 
?>

Если у вас есть ошибка синтаксиса в этом файле ...
Или, если есть ошибка, связанная с подключением БД или ошибка синтаксиса SQL ...

вы получите что-то вроде этого в консоли:

SyntaxError: Unexpected token < in JSON at position 0(…)

И ничего не происходит на главной странице, но вращающийся .gif, который держит на поворотах. Кстати, я только что обнаружил этот loading gif generator, который стоит посмотреть. ;)

источник

2016-10-19 11:24:00

Я попробую это и дам вам знать, однако уже большое спасибо! – jor

Итак, я попробовал. Здесь снова моя проблема. Я всегда получаю сообщение "SyntaxError: Неожиданный токен <в JSON в позиции 0 (...)". Это связано с тем, что мне нужно связать файл search.php. В моем случае это называется autocomplete.php. Но поскольку я работаю с принципом MVC, поэтому мне нужно связать его с php. Например: url: « «Но это, похоже, не работает = (Любые предложения? – jor

Эта ошибка у вас есть, потому что ваш autocomplete.php выталкивает ошибку вместо json. Получите доступ к нему, чтобы полностью увидеть ошибку (используя полное ключевое слово +, например 'https: //www.bessetteweb.com/SO/40118887/search.php? keyword = mass') или проверьте, что вы' error.log' файл в каталоге, где файл ... для отладки, эхо ваших vars ... –

ответ

Смежные вопросы