Используйте JavaScript для пометки слова из списка

Question

Используйте JavaScript для пометки слова из списка

0

Я пытаюсь использовать javascript для обозначения слова из набора, но он, похоже, не работает. В принципе, я хочу, чтобы пользователь мог вводить слово, и если он соответствует любому в списке справа, он обозначает слово в красном.

Любая идея о том, что я делаю неправильно?

http://jsfiddle.net/Copernicus76/rpuXW/embedded/result/

// Load the banned plates json data

  var platesJson = (function () {
      platesJson = null;
      $.ajax({
          'async': false,
              'global': false,
              'url': "bannedplates.json",
              'dataType': "json",
              'success': function (bannedplates) {
              platesJson = bannedplates;
          }
      });
      return platesJson;
  })();


  $(document).ready(function () {

      // Draw the list //

      $.each(platesJson, function (i) {
          $('#plate-list').append('<div class="row-' + i + '">' + platesJson[i].plate + '</div>');
      });


      // Search the banned plates //

      $('#plate-text').keyup(function () {

          var result = '';
          var plateRow = '';
          var scrollPosition;
          var searchText = $('#plate-text').val().toUpperCase();

          $.each(platesJson, function (i) {
              if (searchText == platesJson[i].plate) {
                  result = 'banned';
                  plateRow = i;
                  scrollPosition = i * 19;
              }

          });

          if (/\S/.test(searchText)) {

              if (result == 'banned') {
                  $('#plate-intro,#plate-ok').hide();
                  $('#plate-banned').show().fadeOut(1500);
                  $('#plate-text').addClass('banned');
                  $('#plate-list').animate({
                      scrollTop: scrollPosition
                  }, 1000);
                  $('#plate-list div.row-' + plateRow + '').addClass('banned');
              } else {
                  $('#plate-intro,#plate-banned').hide();
                  $('#plate-ok').show().fadeOut(1500);
                  $('#plate-text').removeClass('banned');
              }

          } else {
              $('#plate-text').val('');
              $('#plate-ok,#plate-banned').hide();
              $('#plate-intro').show();
          }

      });

  }); // end document ready

user2727935 20 сен. 2013, в 19:45

Источник

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Joe Frambach · Answer 1 · 2013-09-20T15-36-00.000Z

  var platesJson = (function () {
      platesJson = null;
      $.ajax({
          'async': false,
          'global': false,
          'url': "bannedplates.json",
          'dataType': "json",
          'success': function (bannedplates) {
              platesJson = bannedplates;
          }
      });
      return platesJson;
  })();

Это не так, как работает ajax. Первый a означает asynchronous, поэтому функция успеха будет выполняться всякий раз, когда возвращается ответ. Это происходит не сразу, это может занять несколько минут, иначе это может закончиться полностью. Метод success - это обратный вызов. Это то, где вы хотите сделать магию.

  $.ajax({
      'async': false,
      'global': false,
      'url': "bannedplates.json",
      'dataType': "json",
      'success': function (bannedplates) {
          $.each(bannedplates, function (i) {
              $('#plate-list').append('<div class="row-' + i + '">' + bannedplates[i].plate + '</div>');
          });
          $('#plate-text').keyup(function () {
              // ...the rest of your code
          });
      }
  });