Question

有没有办法我可以使用HTML表单文本框执行高级搜索，我可以开始键入我的一个成员的用户名，它会列出所有接近我仍然键入的成员，喜欢facebook搜索，但只有姓名（不是个人资料图片）。

例如，如果我有一个包含以下内容的成员列表：

Jamie123
Jackzo
Josh
Dan

当我输入我的盒子时，＆＃34; J＆＃34;所有上述内容除了＆＃34; Dan＆＃34;会在一个投递箱中显示当我输入我的盒子时，＆＃34; Ja＆＃34;，＆＃34; Dan＆＃34;和＆＃34; Josh＆＃34;不会显示......依此类推？

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

Answer 1

我会考虑使用Select2。您可以在此处找到更多信息：http://ivaynberg.github.io/select2/

Answer 2

你必须使用javascript，我推荐JQuery。您可以使用JQuery中的内置函数ajax来执行此操作，使用它可以向服务器发送POST请求而无需刷新页面。然后使用php获取数据。

如果您是javascript的新手，我建议您访问youtube并查看一些教程，查找JQuery教程。

Answer 3

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

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

您需要在用户输入时显示结果（通过css将其放在文本框下）：

<div id="search_suggest"></div>

在html页面的顶部，您必须包含（除了jquery）一个将处理请求的.js文件：

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

aja_search.js代码是：

//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 = '';
}

从上面的js可以看出，用户必须输入至少3个字符才能启动搜索。我强烈建议你保留它。

最后但并非最不重要的是，您需要ajax调用的search.php文件才能获取结果：

$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";
}

simple_protect和strip_all是我的函数，第一个清理输入，第二个删除斜杠等。你可以自己使用。

最后你需要显示结果正确的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;
}

瞧，瞧！你有高级搜索...

在仍然在搜索框中输入的同时自动显示用户名？

3 个答案: