自动完成

Question

我有一些问题要解决这个问题，我尝试整理一个链接到MySQL和虚拟键盘的自动完成功能。

但我无法让它发挥作用。

这是我的代码：

自动完成

<script type="text/javascript"> 
$(function() {
    $(".auto").autocomplete({
        source: "Searchepost.php",
        minLength: 1
    });             
});
</script>

键盘：

<div id="container">
    <img src='epost.png' height='80' width='80'><font size="5" >Epost:&nbsp;</font><textarea id="write" name="keyboard_text" class='auto' ></textarea>


    <ul id="keyboard">
        <li class="symbol"><span class="off">@</span><span class="on">~</span></li>
        <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
        <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
        <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
        <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
        <li class="symbol"><span class="off">5</span><span class="on">%</span></li>
        <li class="symbol"><span class="off">6</span><span class="on">^</span></li>
        <li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
        <li class="symbol"><span class="off">8</span><span class="on">*</span></li>
        <li class="symbol"><span class="off">9</span><span class="on">(</span></li>
        <li class="symbol"><span class="off">0</span><span class="on">)</span></li>
        <li class="symbol"><span class="off">-</span><span class="on">_</span></li>
        <li class="symbol"><span class="off">=</span><span class="on">+</span></li>
        <li class="delete lastitem">delete</li>
        <li class="tab">tab</li>
        <li class="letter">q</li>
        <li class="letter">w</li>
        <li class="letter">e</li>
        <li class="letter">r</li>
        <li class="letter">t</li>
        <li class="letter">y</li>
        <li class="letter">u</li>
        <li class="letter">i</li>
        <li class="letter">o</li>
        <li class="letter">p</li>
        <!--<li class="symbol"><span class="off">[</span><span class="on">{</span></li>-->
        <!--<li class="symbol"><span class="off">]</span><span class="on">}</span></li>-->
        <li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
        <li class="capslock">caps lock</li>
        <li class="letter">a</li>
        <li class="letter">s</li>
        <li class="letter">d</li>
        <li class="letter">f</li>
        <li class="letter">g</li>
        <li class="letter">h</li>
        <li class="letter">j</li>
        <li class="letter">k</li>
        <li class="letter">l</li>
        <li class="symbol"><span class="off">;</span><span class="on">:</span></li>
        <li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
       <!-- <li class="return lastitem">return</li>-->
        <li class="left-shift">shift</li>
        <li class="letter">z</li>
        <li class="letter">x</li>
        <li class="letter">c</li>
        <li class="letter">v</li>
        <li class="letter">b</li>
        <li class="letter">n</li>
        <li class="letter">m</li>
        <!--<li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li>-->
        <li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
        <li class="symbol"><span class="off">/</span><span class="on">?</span></li>
       <!-- <li class="right-shift lastitem">shift</li>-->
       <!-- <li class="space lastitem">&nbsp;</li>-->
    </ul>

</div>

JS

$(function(){
    var $write = $('#write'),
        shift = false,
        capslock = false;

    $('#keyboard li').click(function(){ //kollar hur keyboard skall se ut från keyboard li style.css
        var $this = $(this),
            character = $this.html(); // If it's a lowercase letter, nothing happens to this variable

        // Shift keys
        if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
            $('.letter').toggleClass('uppercase');
            $('.symbol span').toggle();

            shift = (shift === true) ? false : true;
            capslock = false;
            return false;
        }

        // Caps lock
        if ($this.hasClass('capslock')) {
            $('.letter').toggleClass('uppercase');
            capslock = true;
            return false;
        }

        // Delete
        if ($this.hasClass('delete')) {
            var html = $write.html();

            $write.html(html.substr(0, html.length - 1));
            return false;
        }

        // Special characters
        if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
        if ($this.hasClass('space')) character = ' ';
        if ($this.hasClass('tab')) character = "\t";
        if ($this.hasClass('return')) character = "\n";

        // Uppercase letter
        if ($this.hasClass('uppercase')) character = character.toUpperCase();

        // Remove shift once a key is clicked.
        if (shift === true) {
            $('.symbol span').toggle();
            if (capslock === false) $('.letter').toggleClass('uppercase');

            shift = false;
        }

        // Add the character
        $write.html($write.html() + character);    });
});

键盘适用于我的触摸屏，自动完成效果很好但只能使用真正的键盘。但是自动完成功能无法使用我的虚拟键盘。

我认为问题在于自动完成功能无法识别添加新的可视键盘输入。所以我希望有人可以帮我解决这个问题。

提前致谢！乔金姆

更新：我正在使用：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />

AND Searchepost.php

<?php

define('DB_SERVER', 'xxxx');
define('DB_USER', 'xxx');
define('DB_PASSWORD', 'xxx');
define('DB_NAME', 'xxxxx');

$table='xxxx';
$column='xxx';


$con=mysqli_connect("xxxx", "xxxx", "xxxxx", "xxxxx");   
if (!$con)
{
    die('Failed to connect to mySQL: ' .mysqli_connect_errno());
}




if(!$db || $db->connect_error)
{
  // Some error code handling here
}
else
{
  // need this for JP inserts
  $db->query("SET NAMES 'utf8'");
}






if (isset($_GET['term'])){
    $return_arr = array();

    try {
        $conn = new PDO("mysql:host=".DB_SERVER.";port=xxxx;dbname=".DB_NAME, DB_USER, DB_PASSWORD);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        $stmt = $conn->prepare("SELECT $column FROM $table WHERE $column LIKE :term");
        $stmt->execute(array('term' => '%'.$_GET['term'].'%'));

        while($row = $stmt->fetch()) {
            $return_arr[] =  $row["$column"];
        }

    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }


    /* Toss back results as json encoded array. */
    echo json_encode($return_arr);
}

Answer 1

由于您正在使用jQuery UI自动填充，因此您可以使用提供的"search"方法

Demo

这不是您的完整代码，只是为了让它正常工作所需的更改：

自动完成弹出窗口将与键盘重叠，因此我缩小了textarea并将弹出窗口放在旁边：

$(".auto").autocomplete({
  source: "Searchepost.php",
  position: {
    my: 'left top',
    at: 'right top'
  },
  minLength: 1
});

然后按如下方式修改删除键：

// Delete
if ($this.hasClass('delete')) {
  var html = $write.html(),
    txt = html.substr(0, html.length - 1);
  $write.html(txt);
  $write.autocomplete("search", txt);
  return false;
}

最后在底部，修改添加角色的方式：

// Add the character
var txt = $write.html() + character;
$write.html(txt);
$write.autocomplete("search", txt);

或者，您可以使用我的virtual keyboard插件，其中包含自动填充扩展程序和许多其他功能。看看我刚刚联系的演示。

虚拟键盘和自动完成功能无法协同工作

自动完成

键盘：

JS

1 个答案:

Demo