Автозаповнення користувацького інтерфейсу JQuery на полях імені та прізвища

Я б подумав, що хтось матиме цю проблему, але я ніколи не можу знайти відповідь. Я хотів би мати два поля введення, ім'я та прізвище, з тим же джерелом автозавершення. Коли користувач вводить поля для імені та прізвища, я хочу, щоб випадаюче вікно автозавершення фільтрувалось, підігнавши ім'я до поля імені та прізвище до поля прізвища.

Мій код в даний час, просто реалізація автозаповнення на обох полях.

 $(function() {
   var names = ["John Smith", "Jimothy Doe", "Stuart Brown"];
   $( "#firstname" ).autocomplete({
   source: names
   });
   $( "#lastname" ).autocomplete({
   source: names
   });
 });


 <input type='text' id='firstname' />
 <input type='text' id='lastname' />

Вводячи J в першому полі відображатиметься Джон Сміт і Джимоті Доу, але, набравши S у друге поле, відображатиметься лише Джон Сміт, а не Стюарт Браун.

How it works currently: http://jsfiddle.net/HSYYz/1/

1
Карп Я здогадуюсь, що не вибираю імена розумно. Я буду редагувати свої імена та додати посилання.
додано Автор notblakeshelton, джерело
Карп Я здогадуюсь, що не вибираю імена розумно. Я буду редагувати свої імена та додати посилання.
додано Автор notblakeshelton, джерело
Карп Я здогадуюсь, що не вибираю імена розумно. Я буду редагувати свої імена та додати посилання.
додано Автор notblakeshelton, джерело
@ j08691 це все гаразд. Я думаю, що я майже це зрозумів. Я напишу відповідь, коли я почну працювати.
додано Автор notblakeshelton, джерело
@ j08691 це все гаразд. Я думаю, що я майже це зрозумів. Я напишу відповідь, коли я почну працювати.
додано Автор notblakeshelton, джерело
@ j08691 це все гаразд. Я думаю, що я майже це зрозумів. Я напишу відповідь, коли я почну працювати.
додано Автор notblakeshelton, джерело
@ j08691 це все гаразд. Я думаю, що я майже це зрозумів. Я напишу відповідь, коли я почну працювати.
додано Автор notblakeshelton, джерело
Ой, мій поганий. Я неправильно читаю ваше запитання. Хоча ви не можете очікувати, що автозавершення визначить, яку частину тексту ви введете для пошуку, він використовує весь рядок. Якщо ти не хочеш, щоб це було тобі, то це потрібно явно розповісти. Можливо, вам доведеться спочатку переглянути розділ введення.
додано Автор j08691, джерело

8 Відповіді

Мені довелося поставити функції в параметрі джерела та вибрати подію віджету автозавершення.

$("#firstname, #lastname").autocomplete({
  source: function(request, response) {
    term1 = $("#firstname").val();
    term2 = $("#lastname").val();
    names2 = new Array();
    i = 0;
    while (i < names.length) {
      namesSplit = names[i].split(RegExp(" +"));
      j = 2;
      while (j < namesSplit.length) {
        namesSplit[1] += " " + namesSplit[j];
        j++;
      }
      if (namesSplit[0].match(term1) && namesSplit[1].match(term2)) {
        names2.push(names[i]);
      }
      i++;
    }
    response(names2);
  },
  select: function(event, ui) {
    uiSplit = ui.split(RegExp(" +"));
    $("#firstname").val(uiSplit[0]);
    $("#lastname").val(uiSplit[1]);
  }
});

Вибачте, якщо код трохи грубий; Мені довелося перетворити його з coffeescript.

1
додано

Мені довелося поставити функції в параметрі джерела та вибрати подію віджету автозавершення.

$("#firstname, #lastname").autocomplete({
  source: function(request, response) {
    term1 = $("#firstname").val();
    term2 = $("#lastname").val();
    names2 = new Array();
    i = 0;
    while (i < names.length) {
      namesSplit = names[i].split(RegExp(" +"));
      j = 2;
      while (j < namesSplit.length) {
        namesSplit[1] += " " + namesSplit[j];
        j++;
      }
      if (namesSplit[0].match(term1) && namesSplit[1].match(term2)) {
        names2.push(names[i]);
      }
      i++;
    }
    response(names2);
  },
  select: function(event, ui) {
    uiSplit = ui.split(RegExp(" +"));
    $("#firstname").val(uiSplit[0]);
    $("#lastname").val(uiSplit[1]);
  }
});

Вибачте, якщо код трохи грубий; Мені довелося перетворити його з coffeescript.

1
додано

Мені довелося поставити функції в параметрі джерела та вибрати подію віджету автозавершення.

$("#firstname, #lastname").autocomplete({
  source: function(request, response) {
    term1 = $("#firstname").val();
    term2 = $("#lastname").val();
    names2 = new Array();
    i = 0;
    while (i < names.length) {
      namesSplit = names[i].split(RegExp(" +"));
      j = 2;
      while (j < namesSplit.length) {
        namesSplit[1] += " " + namesSplit[j];
        j++;
      }
      if (namesSplit[0].match(term1) && namesSplit[1].match(term2)) {
        names2.push(names[i]);
      }
      i++;
    }
    response(names2);
  },
  select: function(event, ui) {
    uiSplit = ui.split(RegExp(" +"));
    $("#firstname").val(uiSplit[0]);
    $("#lastname").val(uiSplit[1]);
  }
});

Вибачте, якщо код трохи грубий; Мені довелося перетворити його з coffeescript.

1
додано

Мені довелося поставити функції в параметрі джерела та вибрати подію віджету автозавершення.

$("#firstname, #lastname").autocomplete({
  source: function(request, response) {
    term1 = $("#firstname").val();
    term2 = $("#lastname").val();
    names2 = new Array();
    i = 0;
    while (i < names.length) {
      namesSplit = names[i].split(RegExp(" +"));
      j = 2;
      while (j < namesSplit.length) {
        namesSplit[1] += " " + namesSplit[j];
        j++;
      }
      if (namesSplit[0].match(term1) && namesSplit[1].match(term2)) {
        names2.push(names[i]);
      }
      i++;
    }
    response(names2);
  },
  select: function(event, ui) {
    uiSplit = ui.split(RegExp(" +"));
    $("#firstname").val(uiSplit[0]);
    $("#lastname").val(uiSplit[1]);
  }
});

Вибачте, якщо код трохи грубий; Мені довелося перетворити його з coffeescript.

1
додано

У мене була така ж проблема, але також потрібна підтримка збігів середніх імен. В результаті я склав три функції і просто змінював регулярний вираз, щоб відповідати різним випадкам.

$( "#firstnameInput" ).autocomplete({
        source: function( request, response ) {
            //matches first letter of the whole name
            var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
            response( $.grep( fullnavnArray, function( item ){
                return matcher.test( item );
            }) );
       }
    });

    $( "#middlenameInput" ).autocomplete({
        source: function( request, response ) {
            //matches "space" name "space" 
            var matcher = new RegExp( "\\s" + $.ui.autocomplete.escapeRegex( request.term ) +"\\w+\\s", "i" );
            response( $.grep( fullnavnArray, function( item ){
                return matcher.test( item );
            }) );
       }
    });

    $( "#lastnameInput" ).autocomplete({
        source: function( request, response ) {
            //matches "space" name  
            var matcher = new RegExp( "\\s" + $.ui.autocomplete.escapeRegex( request.term )+"\\w+$", "i" );
            response( $.grep( fullnavnArray, function( item ){
                return matcher.test( item );
            }) );
       }
    });
0
додано

У мене була така ж проблема, але також потрібна підтримка збігів середніх імен. В результаті я склав три функції і просто змінював регулярний вираз, щоб відповідати різним випадкам.

$( "#firstnameInput" ).autocomplete({
        source: function( request, response ) {
            //matches first letter of the whole name
            var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
            response( $.grep( fullnavnArray, function( item ){
                return matcher.test( item );
            }) );
       }
    });

    $( "#middlenameInput" ).autocomplete({
        source: function( request, response ) {
            //matches "space" name "space" 
            var matcher = new RegExp( "\\s" + $.ui.autocomplete.escapeRegex( request.term ) +"\\w+\\s", "i" );
            response( $.grep( fullnavnArray, function( item ){
                return matcher.test( item );
            }) );
       }
    });

    $( "#lastnameInput" ).autocomplete({
        source: function( request, response ) {
            //matches "space" name  
            var matcher = new RegExp( "\\s" + $.ui.autocomplete.escapeRegex( request.term )+"\\w+$", "i" );
            response( $.grep( fullnavnArray, function( item ){
                return matcher.test( item );
            }) );
       }
    });
0
додано

У мене була така ж проблема, але також потрібна підтримка збігів середніх імен. В результаті я склав три функції і просто змінював регулярний вираз, щоб відповідати різним випадкам.

$( "#firstnameInput" ).autocomplete({
        source: function( request, response ) {
            //matches first letter of the whole name
            var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
            response( $.grep( fullnavnArray, function( item ){
                return matcher.test( item );
            }) );
       }
    });

    $( "#middlenameInput" ).autocomplete({
        source: function( request, response ) {
            //matches "space" name "space" 
            var matcher = new RegExp( "\\s" + $.ui.autocomplete.escapeRegex( request.term ) +"\\w+\\s", "i" );
            response( $.grep( fullnavnArray, function( item ){
                return matcher.test( item );
            }) );
       }
    });

    $( "#lastnameInput" ).autocomplete({
        source: function( request, response ) {
            //matches "space" name  
            var matcher = new RegExp( "\\s" + $.ui.autocomplete.escapeRegex( request.term )+"\\w+$", "i" );
            response( $.grep( fullnavnArray, function( item ){
                return matcher.test( item );
            }) );
       }
    });
0
додано

У мене була така ж проблема, але також потрібна підтримка збігів середніх імен. В результаті я склав три функції і просто змінював регулярний вираз, щоб відповідати різним випадкам.

$( "#firstnameInput" ).autocomplete({
        source: function( request, response ) {
            //matches first letter of the whole name
            var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
            response( $.grep( fullnavnArray, function( item ){
                return matcher.test( item );
            }) );
       }
    });

    $( "#middlenameInput" ).autocomplete({
        source: function( request, response ) {
            //matches "space" name "space" 
            var matcher = new RegExp( "\\s" + $.ui.autocomplete.escapeRegex( request.term ) +"\\w+\\s", "i" );
            response( $.grep( fullnavnArray, function( item ){
                return matcher.test( item );
            }) );
       }
    });

    $( "#lastnameInput" ).autocomplete({
        source: function( request, response ) {
            //matches "space" name  
            var matcher = new RegExp( "\\s" + $.ui.autocomplete.escapeRegex( request.term )+"\\w+$", "i" );
            response( $.grep( fullnavnArray, function( item ){
                return matcher.test( item );
            }) );
       }
    });
0
додано