自动完成多个关键字

我想要。使用多个关键字自动完成文本框。它来自数据库。如果我使用jQuery并在客户端操作意味着。如果数据库规模很大，会导致一些问题。我需要知道如何在服务器端完成并获得正确的结果。自动完成多个关键字

我已经看过这个话题，但操作是在客户端完成的。我直接从数据库需要它。

<html> 
<head> 
    <title>Testing</title> 
    <link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" /> 
    <style type="text/css"> 
     .srchHilite { background: yellow; } 
    </style> 
    <script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script> 
    <script src="scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
      NewAuto(); 
     }); 

     function NewAuto() { 
      var availableTags = ["win the day", "win the heart of", "win the heart of someone"]; 
      alert(availableTags); // alert = win the day,win the heart of,win the heart of someone 
      $("#tags").autocomplete({ 
       source: function(requestObj, responseFunc) { 
        var matchArry = availableTags.slice(); // Copy the array 
        var srchTerms = $.trim(requestObj.term).split(/\s+/); 
        // For each search term, remove non-matches. 
        $.each(srchTerms, function(J, term) { 
         var regX = new RegExp(term, "i"); 
         matchArry = $.map(matchArry, function(item) { 
          return regX.test(item) ? item : null; 
         }); 
        }); 
        // Return the match results. 
        responseFunc(matchArry); 
       }, 
       open: function(event, ui) { 
        // This function provides no hooks to the results list, so we have to trust the selector, for now. 
        var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a"); 
        var srchTerm = $.trim($("#tags").val()).split(/\s+/).join('|'); 
        // Loop through the results list and highlight the terms. 
        resultsList.each(function() { 
         var jThis = $(this); 
         var regX = new RegExp('(' + srchTerm + ')', "ig"); 
         var oldTxt = jThis.text(); 
         jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>')); 
        }); 
       } 
      }); 
     } 

    </script> 
</head> 
<body> 
    <div> 
     <label for="tags"> 
      Multi-word search: 
     </label> 
     <input type="text" id="tags" /> 
    </div> 
</body> 
</html>

来源

2013-07-13 Ravindr

您是否需要从数据库加载availableTags？ – wordpressm

是的，我想在服务器端filer它。 – Ravindr

看看Select2它可以帮助你。

Select2是一个基于jQuery的替代选择框。它支持搜索，远程数据集和结果的无限滚动。

link

来源

2013-07-13 17:37:01

在您的代码，您所提供的源作为数组。正如你在评论中提到的，问题在于如何在jquery中获取数据来源。

为了使这项工作，你需要做以下的头

负载jQuery的，这是你已经做了。
供给源标签的数组，字符串或函数。 [对于见API源标记] [1]
```
[1]: http://api.jqueryui.com/autocomplete/#option-source 
```
在你的服务器端脚本，provid杰森编码字符串。

如果你检查API，你可以看到他们已经清楚地提到了这一点。

这里是jQuery代码

$(function() { 


    $("#option_val").autocomplete({ 
    dataType: "json", 
     source: 'search.php', 
     minLength: 1, 
     select: function(event, ui) { 
     log(ui.item ? 
      "Selected: " + ui.item.value + " aka " + ui.item.id : 
      "Nothing selected, input was " + this.value); 
     } 
    }); 
    }); 
    </script>

这里是PHP代码，很抱歉，如果您使用不同的充服务器端脚本语言。

<?php 
// Create connection 
$con=mysqli_connect("localhost","wordpress","password","wordpress"); 

// Check connection 
if (mysqli_connect_errno($con)) 
    { 
    echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
    } 

$result=mysqli_query($con,"select * from wp_users"); 

while($row = mysqli_fetch_array($result)) 
    { 

    $results[] = array('label' => $row['user_login']); 
    } 

echo json_encode($results); 
mysqli_close($con); 
?>

来源

2013-07-14 08:15:50 newday

感谢您的回复。这里我的问题是。如果查询数据很大，如何过滤它。如果我返回完整的数组意味着客户端系统挂起。我的需求是在服务器端完成过滤。 – Ravindr

自动完成多个关键字

回答

相关问题