Jquery Search + MVC3

Question

Я вдохновлен, чтобы повторить эту функцию на моем сайте.

Это

Сервер написан на php, я не знаком с ним. Был бы очень признателен за руководство. Любой пример кода или псевдокода будет высоко оценен в отношении .NET MVC3

В настоящее время я использую поисковый веб-сервис, который возвращает объект на основе искомого заголовка.

Спасибо

Answer 1

Бэкэнд делает это:

1. Фактическая страница отправляет запрос 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
        });
    }    
 });

1. Внутренняя страница "givemeresults.aspx" получает значение "q" из строки запроса и запрашивает базу данных следующим образом:

   Выберите имя из mytable, где имя, например, "?%",? = значение q из строки запроса

2. Когда приходят результаты, он строит массив JSON из результатов и затем выводит его на экран.

3. Ваша фактическая страница получает результат и декодирует его, затем строит список. и показывает пользователя.

Это стиль работы автозаполнения.

А отличия скрипта по ссылке, которую вы дали:

• Используется http://qpoit.com/marcofolio_demo/apple_search/rpc.php для POST (не GET)
• Результатом является не массив JSON, а непосредственно содержимое списка. Он строит список на стороне сервера.

Остальные такие же.

Нужно что-то еще?

Answer 2

Что вам нужно сделать, это написать метод контроллера, который будет возвращать 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 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>

Нет модели, потому что я использую метод веб-сервиса Search, который возвращает список объектов.

Спасибо, надеюсь, что приведенные выше коды помогут всем, кто хочет сделать то же самое.