Question

我鼓励在我的网站中复制此功能。

后端是用PHP编写的，我不熟悉它。真的很感激它的一些指导。任何示例代码或伪代码都将非常适合.NET MVC3

目前，我正在使用基于搜索到的标题返回对象的搜索Web服务。

由于

Answer 1

您需要做的是编写一个控制器方法，它将返回json并将查询字符串作为参数。然后使用jQueryUI自动完成来编写客户端。

从jQueryUI示例：

$( "#birds" ).autocomplete({
        source: "/YourController/YourMethod",
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value );
        }
    });

ASP.NET MVC方法：

public JsonResult YourMethod(string term)
{
    return JSON(new {id=1, value="asdf"});
}

这是一个示例代码（它尚未编译或测试，因此很可能存在您需要解决的问题）

Answer 2

后端做了这件事：

实际页面正在向
发送AJAX请求
http://yourpage/givemeresults.aspx?q=my_keyword

 $("#mytextbox").bind("change",function(){
    if($.trim($(this).val())=!""){
        $.getJSON("http://yourpage/givemeresults.aspx?q=" + $(this).val(), function(data){
            //add data to overlaying div and show it
        });
    }    
 });

后端页面“givemeresults.aspx”从查询字符串中获取“q”值并查询数据库，如下所示：

从mytable中选择名称，例如“？％”，？ =来自查询字符串的q值
当结果到达时，它会根据结果构建一个JSON数组，然后将其放在屏幕上。
您的实际页面获取结果并对其进行解码，然后构建列表。并显示用户。

这是自动填充的工作方式。

你给出的链接上的脚本差异：

这使用http://qpoit.com/marcofolio_demo/apple_search/rpc.php来POST（不是GET）
结果不是JSON数组，直接列表的内容。它构建列表服务器端。

其他是相同的。

需要别的东西吗？

Answer 3

我的尝试答案。它有效。

剧本

google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{
// Safely inject CSS3 and give the search results a shadow
var cssObj = { 'box-shadow' : '#888 5px 10px 10px', // Added when CSS3 is standard
    '-webkit-box-shadow' : '#888 5px 10px 10px', // Safari
    '-moz-box-shadow' : '#888 5px 10px 10px'}; // Firefox 3.5+
$("#suggestions").css(cssObj);

// Fade out the suggestions box when not active
 $("input").blur(function(){
    $('#suggestions').fadeOut();
 });
});

function lookup(inputString) {
if(inputString.length == 0) {
    $('#suggestions').fadeOut(); // Hide the suggestions box
} else {

$.post("/Store/Search", { videoTitle: inputString }, 

function (data) { // Do an AJAX call
        $('#suggestions').fadeIn(); // Show the suggestions box
        $('#suggestions').html(data); // Fill the suggestions box
    });
}
}

控制器

    [HttpPost]
    public JsonResult Search(string videoTitle)
    {
        List<Searchable> searchedList = new List<Searchable>();
        var auth = new Authentication() { Email = "smu@smu.com", Password = "test" };
        var videoList = server.Search(auth, videoTitle);

        return Json(videoList.ToList(), JsonRequestBehavior.AllowGet);
    }

视图

   <form id="searchform">
<div>
    What are you looking for?
    <input type="text" size="30" id="inputString" name="inputString" onChange="lookup(this.value);" />
</div>
<div id="suggestions">
</div>
</form>

没有模型，因为我正在使用Web服务方法搜索返回对象列表。

谢谢，希望上述代码可以帮助任何想要这样做的人。

Jquery Search + MVC3

3 个答案: