输入文本框背景中的jQuery自动完成

Posted

技术标签:

【中文标题】输入文本框背景中的jQuery自动完成【英文标题】:jQuery autocomplete in background of input text box 【发布时间】:2011-09-14 05:34:47 【问题描述】:

我有一个 jQuery 文本框自动完成脚本,它使用 php 脚本来查询 mysql 数据库。目前,结果显示在文本框下,但是我希望它看起来好像在文本框中淡出一样。我怎么能做这样的事情? Google Instant 搜索框就是一个例子。

我当前的网页代码是:

<script type='text/javascript'>
function lookup(a)

    if(a.length==0)
    
        $("#suggestions").hide();
    
    else
    
        $.post("suggest.php",  query: ""+a+"" , function(b)
        
            $("#suggestions").html(b).show();
        );
    

</script>

<input type='text' id='query' onkeyup='lookup(this.value);'>
<div id='suggestions'></div>

而我的 PHP 代码是:

<?php
$database = new mysqli('localhost', 'username', 'password', 'database');

if(isset($_POST['query']))

    $query = $database->real_escape_string($_POST['query']);

    if(strlen($query) > 0)
    
        $suggestions = $database->query("SELECT name, value FROM search WHERE name LIKE '%" . $query . "%' ORDER BY value DESC LIMIT 1");

        if($suggestions)
        
            while($result = $suggestions->fetch_object())
            
                echo '' . $result->name. '';
            
        
    

?>

【问题讨论】:

我刚刚编辑了这段代码,使其更易于阅读。我建议更多地间隔你的代码,这样以后调试就不会那么难了。 【参考方案1】:

看起来 Google 使用了 2 个输入,一个是灰色文本,另一个是黑色文本。然后将它们叠加起来,使灰色文本输入在底部,黑色文本输入在顶部(看起来像更大的 z-index)。

灰色输入包含全文和建议,黑色输入仅显示您输入的内容。希望这可以帮助您弄清楚代码。这是谷歌的 html:

<div style="position:relative;zoom:1"> 
  <div style="position:relative;background:transparent"> 
    <input type="text" maxlength="2048" id="grey" disabled="disabled" autocomplete="off" class="lst"> 
    <div id="misspell" class="lst"></div> 
  </div> 
  <div> 
    <div class="lst" style="position: absolute; top: -900px; left: -9000px; max-width: 3000px; overflow: hidden; width: auto;"></div>
    <input type="text" maxlength="2048" name="q" class="lst" autocomplete="off" size="41" title="Search" value=""> 
    <span id="tsf-oq" style="display:none"></span> 
  </div> 
</div>

编辑: 这是您可能会使用的一些 html 和 css 的非常简化的版本 http://jsfiddle.net/JRxnR/

#grey

    color: #CCC;
    background-color: transparent;
    top: 0px;
    left: 0px;
    position:absolute;

#black

    color: #000;
    background-color: transparent;
    z-index: 999;
    top: 0px;
    left: 0px;
    position:absolute;


<input id="grey" type="text" value="test auto complete" />
<input id="black" type="text" value="test" />

【讨论】:

【参考方案2】:

如果它是文本框然后在 keyup 事件上将先前的文本颜色属性更改为暗色,我仍然不确定您想要的效果到底在哪里,即

$('#query').css('color','gray');

这会将文本的颜色更改为灰色。或者你也可以尝试改变它的不透明度。

id的样式

#灰色

被谷歌使用。

#grey 
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: transparent;
    color: silver;
    overflow: hidden;
    position: absolute;
    z-index: 1;

所以在第一步中,您使用 z-index 显示自动建议的文本,然后在下一步中显示用户输入的文本,这将为您提供与 google 相同的效果。

【讨论】:

如果您希望自动建议的文本以灰色显示,而您输入的文本以黑色显示,那么这对我来说也很有趣,因为您无法选择自动建议的文本,就好像它已添加一样作为文本字段的图像或背景,而不是输入文本。 是的,我已经使用萤火虫确认了这一点,他们使用 z-index 属性让自动建议的文本出现在背景中。智能效果

以上是关于输入文本框背景中的jQuery自动完成的主要内容,如果未能解决你的问题,请参考以下文章

输入 jQuery 自动完成文本框时显示整个列表

选择后清除 Jquery 自动完成中的文本框

jquery自动完成asp.net Gridview中的多个文本框

禁用文本框后 JQuery UI 自动完成功能不起作用

将输入文本框中的文本替换为所选自动完成选项中的文本

仅当满足特定条件时,JQuery 才会自动完成