Question

<?php

   // PDO connect *********
     function connect() {
 return new PDO('mysql:host=localhost;dbname=daddyji', 'root', '',   
   array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,    
  PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
   }

       $pdo = connect();
       $keyword = '%'.$_POST['keyword'].'%';
       $sql = "SELECT * FROM user WHERE area LIKE (:keyword) ORDER BY id ASC              
       LIMIT 0, 10";
        $query = $pdo->prepare($sql);
       $query->bindParam(':keyword', $keyword, PDO::PARAM_STR);
       $query->execute(); 
    $list = $query->fetchAll();
       foreach ($list as $rs) {
// put in bold the written text
$area_name = str_replace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $rs['area']);
// add new option
        echo '<li class="li_area" onclick="set_item(\''.str_replace("'",                           
          "\'",                          
       $rs['area']).'\')">'.$area_name.'</li>';
      }

 ?>

我无法点击自动提示中显示的列表。我希望自动提示像谷歌一样工作，就像建议出现时我们甚至可以用键盘键向下滚动。

function where() {
var min_length = 2; // min caracters to display the autocomplete
var keyword = $('#whereid').val();
if (keyword.length >= min_length) {
    $.ajax({
        url: 'upload_where.php',
        type: 'POST',
        data: {keyword:keyword},
        success:function(data){
            $('#area_list_id').show();
            $('#area_list_id').html(data);
        }
    });
 } else {
    $('#area_list_id').hide();
  } 
}

   // set_item : this function will be executed when we select an item
  function set_item(item) {
 // change input value
 $('#whereid').val(item);
 // hide proposition list
 $('#area_list_id').hide();
 }

请帮我设计造型。

Answer 1

在您的PHP代码中，您只返回一行，因此声明 $string = '' foreach()之前，然后替换

echo '<li class="li_area" onclick="set_item(\''.str_replace("'", "\'", $rs['area']).'\')">'.$area_name.'</li>';

通过

$string .= '<li class="li_area" onclick="set_item(\''.str_replace("'", "\'", $rs['area']).'\')">'.$area_name.'</li>';

当循环成功时，您可以echo $string，数据将传递给js代码。

我改变了一点where()函数来改进它：

function where() {
    var min_length = 2; // min caracters to display the autocomplete
    var $target = $('#whereid'); // assign the target to an id if you planned to reuse it
    var keyword = $target.val();

    if (keyword.length < min_length){ // not enough length? return
        $('#area_list_id').hide();
        return;
    }
    if( $target.data('repeat') == keyword ) return; // same string? return

    // here I use the window scope, so "window" is not needed, but I typed it here to make it more readable. It is important to know from where items come.
    if( window.AutoCompleteXHR !== undefined ) window.AutoCompleteXHR.abort(); // avoid repeated string searches and its ajax calls

    $target.data('repeat', keyword); // remember last string avoiding the use of window scope

    // store the call in the variable and exec it
    window.AutoCompleteXHR = $.ajax({
        url: 'upload_where.php',
        type: 'POST',
        data: { keyword: keyword },
        success: function(data){
            $('#area_list_id').show().html(data);
            window.AutoCompleteXHR = undefined; // call finished, object becomes undefined
        }
    });
}

Here is a jsFiddle使用js函数。

我正在尝试制作一个自动提示的文本框，其效果类似于谷歌

1 个答案: