JQuery автозаполнение

Question

Я читаю свой список караоке из БД, и это работает хорошо, но я хочу набрать строку в форме поиска, и по мере ввода она начинает загружать песни и / или исполнителей, которые соответствуют.

Я знаю основы того, что мне нужно, но не уверен, что мне нужно для автозаполнения?

любая помощь или ресурс будут полезны

Answer 1

Вы можете использовать автозаполнение jQuery, включить библиотеку и зависимые файлы в порядке, в котором оно должно отображаться здесь автозаполнение

PHP-код

public function cities() {

    $term = $_GET['term'];
    $cities = array("one","two","three");// contains value fetched from DB
    $filtered = array();
    foreach ($cities as $city) {
      if (stripos($city, $term) !== false) {
        array_push($filtered, $city);
      }
    }
    echo json_encode($filtered);
    exit;
  }

jQuery-код

<script>
  $(function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

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

Answer 2

Вот документация по автозаполнению пользовательского интерфейса jQuery:

http://jqueryui.com/autocomplete/

Вот пример того, как это следует реализовать:

var AutoCompleteOptions = { source: function( request, response ) {
    $.ajax({
        url: 'your URL here',
        dataType: "json",
        data: {
            itemToSearch: request.term // could be any data you are passing in for search
        },
        success: function(data) {
            // do something where search values are returned
        },                                  
    });
    }, 
    select: $.proxy(function(event, ui){
        // what you want to do with that information
        // using a proxy to preserve the reference to 'this'
        return false; // prevent the default response (typically inserting the selected value into the textbox the dropdown is being displayed from.
    },this), 
    open: function(event, ui) { 
        // things to do when the dropdown is rendered
        return false; // prevent default autocomplete open action
    },
    focus: function(event, ui) {
        // what to do when an the user hovers over an item in the drop down
        return false; // prevent default autocomplete open action
    },
    minLength:0 // be sure to set this if you want to be able to trigger the search event manually and have it display results
    };

 var Input = $("input");

 Input.autocomplete(this.AutoCompleteOptions)