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

Question

Я хочу включить функциональность autocomplete, когда пользователь вводит что-то в content editable div. Он должен всегда получать предложения каждый раз, когда набирает новое слово для построения предложения. Поэтому я нашел jquery UI, который удовлетворяет мои потребности.

Вот jsfiddle, который показывает, что он работает http://jsfiddle.net/8ky5um7n/

Теперь проблема заключается в том, что каждый раз, когда пользователь получает предложение autocomplete ивыбирает один, значение добавляется к тексту, но ему следует comma. Таким образом, в основном текст выглядит как значения, разделенные запятыми.

Теперь я хочу удалить comma, добавляемый к каждому выделению из списка auto complete, так, чтобы он выглядел как предложениеа не список, разделенный запятыми.

Итак, изучив код, я нашел этот фрагмент кода, который добавляет comma к концу выбранного слова.

select: function (event, ui) {

                var value = $(this).html();
                var terms = split(value);
                terms.pop();
                terms.push(ui.item.value);
                $(this).html(terms+", ");
                placeCaretAtEnd(this);

            return false;
        }

Как вывидите, этот кусок кода $(this).html(terms+", "); добавляет comma в конце. Поэтому, изменив его на этот

$(this).html(terms);  // I want just the term. So when user receives it, he presses space and next autocomplete suggestion is expected

, он возвращает результат без comma, но затем он больше не предлагает следующие слова в предложении.

Что такоеЯ делаю не так?

Answer 1

Попробуйте использовать   в качестве разделителя вместо ,. Например:

https://jsfiddle.net/Twisty/0omdux5h/

JavaScript

$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];


  function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined" &&
      typeof document.createRange != "undefined") {
      var range = document.createRange();
      range.selectNodeContents(el);
      range.collapse(false);
      var sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
      var textRange = document.body.createTextRange();
      textRange.moveToElementText(el);
      textRange.collapse(false);
      textRange.select();
    }
  }


  function split(val) {
    return val.split(" ");
  }

  function extractLast(term) {
    return split(term).pop();
  }

  $("#tags")
    .bind("keydown", function(event) {
      if (event.keyCode === $.ui.keyCode.TAB &&
        $(this).data("ui-autocomplete").menu.active) {
        event.preventDefault();
      }
    })
    .autocomplete({
      minLength: 0,
      source: function(request, response) {
        var that = $("#tags");
        response($.ui.autocomplete.filter(
          availableTags, extractLast(that.html())));
      },
      focus: function() {
        return false;
      },
      select: function(event, ui) {
        var terms = split($(this).html());
        terms.pop();
        terms.push(ui.item.value);
        var str = terms.join(" ");
        $(this).html(str + " ");
        placeCaretAtEnd(this);
        return false;
      }
    });
});

Это отображается в HTML как неразрывный пробел и работает лучше с вашей функцией курсора. Я обнаружил, что, несмотря ни на что, ввод нового текста приведет к уменьшению пробела. Функционально это не должно быть проблемой. Если вы сохраняете данные где-то, я бы запустил их через функцию замены и преобразовал их обратно в пробелы, так как они представляют собой другой символ.

function nbsp2Space(val){
  return val.replace(" ", " ");
}

Answer 2

В вашей функции разделения вы можете установить разделитель, например, если вы хотите изменить точку с запятой;Вы можете написать:

function split( val ) {
  return val.split( /;\s*/ );
}

Тогда вы измените вставку html на:

$(this).html(terms.join(" ") + "; ");

http://jsfiddle.net/jzn4Lvek/

Answer 3

Я решил это. @ Решение Питера было близко. Таким образом, я должен был измениться в двух местах. Во-первых, функцию split нужно было изменить на

function split( val ) {
      return val.split( / \s*/ );  //notice the (space) that I provided
    }

Во-вторых, мне пришлось изменить вставку html на эту

$(this).html(terms.join(" ") + "");

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