Php 在仍键入搜索框时自动显示用户名？

是否有一种方法可以使用HTML表单文本框执行高级搜索，在该搜索中，我可以开始键入我的一个成员的用户名，它将列出与我仍然键入的内容相近的所有成员，类似于facebook搜索，但只包含名称（而不是个人资料图片）

例如，如果我有一个成员列表，其内容如下：

Jamie123
Jackzo
Josh
Dan

当我在框中键入“J”时，除“Dan”之外的所有上述内容都会显示在下拉框中。
当我在我的盒子里输入时，“Ja”，“Dan”和“Josh”不会显示出来。。。等等

---

这可能吗？如果是，我该怎么做

我建议您必须使用javascript。您可以使用JQuery中名为ajax的内置函数实现这一点，使用它您可以向服务器发送POST请求，而无需刷新页面。然后使用php获取数据

---

我建议你去youtube看看一些教程。如果你对javascript不熟悉，可以看看JQuery教程。

是的……让我们从创建文本框开始：

<input type="text" name="DEMO_NAME" id="DEMO_NAME" alt="Possible Results" onKeyUp="searchSuggest();" autocomplete="off">

• simple_protect和strip_都是我的功能，第一个用于清理输入，第二个用于删除斜杠等。您可以使用自己的功能

最后，您需要显示正确结果的css，我的css如下所示：

.suggest_link {
background-color: #333333;
padding:2px 4px 4px 2px;
color:#858585; font-family:Verdana; font-size:11px; color:#ffffff;
}
.suggest_link_over {
background-color: #666666;
padding:2px 4px 4px 2px;
color:#858585; font-family:Verdana; font-size:11px; color:#ffffff;
}
#search_suggest {
background-color: #333333;
text-align: left; 
z-index:20;  
width:240px; height: inherit;
border:hidden;
color:#ffffff; font-family:Verdana; font-size:11px; cursor: pointer;
}   

---

瞧！您有您的高级搜索…

我将使用Select2进行搜索。您可以在这里找到更多信息：

使用

jquery ajax autocomplete

。。检查此链接。。。。。这也。。。

<script language="JavaScript" type="text/javascript" src="ajax_search.js" charset="utf-8"></script>

//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        alert("Please update your Browser");
    }
}

//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();

//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
    if (searchReq.readyState == 4 || searchReq.readyState == 0) {
        var str = encodeURI(document.getElementById('DEMO_NAME').value);

        searchReq.open("GET", 'search.php?search=' + str, true);
        searchReq.onreadystatechange = handleSearchSuggest; 
        searchReq.send(null);
    }       
}

//Called when the AJAX response is returned.
function handleSearchSuggest() {
    if (searchReq.readyState == 4) {
        var ss = document.getElementById('search_suggest')                  
        ss.innerHTML = ''; 
        if(document.getElementById('DEMO_NAME').value.length > 2)
        { 
        var str = searchReq.responseText.split("\n"); 
            for(i=0; i < str.length - 1; i++) {
                //Build our element string.  This is cleaner using the DOM, but
                //IE doesn't support dynamically added attributes.
                var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
                suggest += 'onmouseout="javascript:suggestOut(this);" ';
                suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
                suggest += 'class="suggest_link">' + str[i] + '</div>';
                ss.innerHTML += suggest;
            }
        }
        else
        {
            ss.innerHTML = 'Please insert at least 3 characters';
        }
    }
}

//Mouse over function
function suggestOver(div_value) {
    div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
    div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
    document.getElementById('DEMO_NAME').value = value;
    document.getElementById('search_suggest').innerHTML = '';
}

$search = $_GET["search"]; 
if(!empty($search))
{
    $query = mysql_query("SELECT * FROM your_table WHERE username like('%" . simple_protect($search) . "%') ORDER BY username") or die (mysql_error()); 
    while ($row = mysql_fetch_assoc($query))
    { //echo $query;
    echo strip_all($row['username'])."\n";
    }
}
else
{
    echo "No Records available";
}

.suggest_link {
background-color: #333333;
padding:2px 4px 4px 2px;
color:#858585; font-family:Verdana; font-size:11px; color:#ffffff;
}
.suggest_link_over {
background-color: #666666;
padding:2px 4px 4px 2px;
color:#858585; font-family:Verdana; font-size:11px; color:#ffffff;
}
#search_suggest {
background-color: #333333;
text-align: left; 
z-index:20;  
width:240px; height: inherit;
border:hidden;
color:#ffffff; font-family:Verdana; font-size:11px; cursor: pointer;
}