Текстовое поле автозаполнения в Asp. net MVC

Question

Я работаю в asp. net MVC. Мне нужно текстовое поле для автозаполнения с помощью функции ajax. Ajax функция не может вызывать значения из контроллера.

Вот код:

 $( "#birds" ).autocomplete({
      source: function( request, response ) {
        $.ajax( {
          url: "search.php",
          dataType: "jsonp",
          data: {
            term: request.term
          },
          success: function( data ) {
            response( data );
          }
        } );
      },
      minLength: 2,
      select: function( event, ui ) {
        log( "Selected: " + ui.item.value + " aka " + ui.item.id );
      }
} );

Answer 1

Вот полный код:

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $( function() {
            var cache = {};
            $( "#birds" ).autocomplete({
                minLength: 2,
                source: function( request, response ) {
                    var term = request.term;
                    if ( term in cache ) {
                        response( cache[ term ] );
                        return;
                    }

                    $.getJSON( "Your Controller URL", request, function( data, status, xhr ) {
                        cache[ term ] = data;
                        response( data );
                    });
                }
            });
        } );
    </script>

Ваш контроллер должен ответить на данные в формате JSON, например:

[{"id":"Locustella naevia","label":"Common Grasshopper Warbler","value":"Common Grasshopper Warbler"},{"id":"Locustella certhiola","label":"Pallas`s Grasshopper Warbler","value":"Pallas`s Grasshopper Warbler"}]

Ваш JSON должен быть динамическим c В противном случае он ответит вам тем же JSON. Вы должны отфильтровать свои данные в контроллере, прежде чем отвечать обратно на AJAX, а данные всегда в формате JSON.

Подробнее об автозаполнении можно узнать на https://jqueryui.com/autocomplete/ & https://jqueryui.com/autocomplete/#remote -с-кеш