Как показать только один столбец jquery UI автозаполнения нескольких результатов? - PullRequest
0 голосов
/ 24 марта 2020

это мой css:

.ui-autocomplete {
    max-height: 200px;
    position: absolute;
    max-width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

первое изображение показывает автозаполнение, когда я запрашиваю только один столбец в php:

$dbName= "Books";
$term = $_POST["term"];
$data = array();
$query = "select title from bookstable where title like '%$term%' limit 0 , 20 ;";
include "dbConfig.php";
$result = $mysqli->query($query);
while($row = $result->fetch_array(MYSQLI_NUM) ){
    $data[] = $row[0];
}
$result -> free_result();
$mysqli->close();
echo json_encode($data);

второе изображение показывает автозаполнение когда я запрашиваю несколько столбцов:

$dbName= "Books";
$term = $_POST["term"];
$data = array();
$query = "select title,id,url from bookstable where title like '%$term%' limit 0 , 20 ;";
include "dbConfig.php";
$result = $mysqli->query($query);
while($row = $result->fetch_array(MYSQLI_ASSOC) ){
    $data[] = array("title"=>$row['title'],"id"=>$row['id'],"url"=>$row["url"]);
}
$result -> free_result();
$mysqli->close();
echo json_encode($data);

оба запроса успешно выполняются с использованием этого jquery:

    $( this ).autocomplete({
      appendTo: "#tagsuggestions",
      source: function( request, response ) {
        $.ajax( {
          type: "POST",
          url: "/includes/root-bookstitles.php",
          dataType: "json",
          data: {
            term: request.term
          },
          success: function( data ) {
            response( data );
          }
        } );
      },
      minLength: 3,
      select: function( event, ui ) {
        //this part for the multiple request. when I select. the values are set
        // for the input fields even if the results don't show up
        $(this).val(ui.item.title);
        $("#bookid").val(ui.item.id);
        $("#bookurl").val(ui.item.url);
      }
    } );

, но запрос с несколькими результатами не отображается должным образом. так как я могу показать только часть заголовка из ответа JSON?

enter image description here

enter image description here

...