Виртуальная клавиатура и автозаполнение не работают вместе

У меня есть некоторые проблемы, чтобы решить эту проблему, я пытаюсь собрать функцию автозаполнения, которая связана с 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" />

И 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);
}
Источник

1 ответ

Поскольку вы используете автозаполнение пользовательского интерфейса jQuery, вы можете использовать предоставленный метод "поиск"

демонстрация

Это не полный код, а изменения, необходимые для его работы:

Всплывающее окно автозаполнения будет перекрывать клавиатуру, поэтому я сузил текстовую область и поместил всплывающее окно рядом с ней:

$(".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);

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

Источник
Другие вопросы по тегам