1

Есть города, с автоподгрузкой

var states = ['Киев', 'Москва', 'Токио'
];

при выборе города они в input устанавливаются как написано выше типа Киев и т.д. а нужно что бы устанавливалось в виде

 var states = ['kiev', 'moscow', 'tokio'
    ];

но пользователь это видеть не должен

 var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var states = ['Киев', 'Москва', 'Токио'
];
 
$('#the-basics .typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'states',
  source: substringMatcher(states)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://twitter.github.io/typeahead.js/css/examples.css" />
<div id="the-basics">
  <input class="typeahead" type="text" placeholder="ГОРОД">
</div>

4
  • В плане пользователь этого видеть не должен? 8 авг 2017 в 14:44
  • @Horchynskyi неправильно выразился, ну что бы Пользователь видел как Киев а на самом деле в инпате значение было kiev
    – kursof
    8 авг 2017 в 14:46
  • думаю это нереально ведь value отвечает за то что написанно в input, только если сохранять значение kiev в другой атрибут думаю 8 авг 2017 в 14:51
  • @Horchynskyi да хотя бы в другой атрибут я уже тут задолбался искать, в документации вообще не сображаю
    – kursof
    8 авг 2017 в 14:53

2 ответа 2

1

В интернете нарыл такую функцию не знаю подойдет ли вам но всё же. Просто транслитит то что введено в строку и по моему должно работать даже если виберете подсказку город, но надо затестить. Добавляет это в атрибут data-translit и тогда уже значение с него можно брать

function translit(){
// Символ, на который будут заменяться все спецсимволы
var space = '-'; 
// Берем значение из нужного поля и переводим в нижний регистр
var text = $('#city').val().toLowerCase();
     
// Массив для транслитерации
var transl = {
'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'e', 'ж': 'zh', 
'з': 'z', 'и': 'i', 'й': 'j', 'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n',
'о': 'o', 'п': 'p', 'р': 'r','с': 's', 'т': 't', 'у': 'u', 'ф': 'f', 'х': 'h',
'ц': 'c', 'ч': 'ch', 'ш': 'sh', 'щ': 'sh','ъ': space, 'ы': 'y', 'ь': space, 'э': 'e', 'ю': 'yu', 'я': 'ya',
' ': space, '_': space, '`': space, '~': space, '!': space, '@': space,
'#': space, '$': space, '%': space, '^': space, '&': space, '*': space, 
'(': space, ')': space,'-': space, '\=': space, '+': space, '[': space, 
']': space, '\\': space, '|': space, '/': space,'.': space, ',': space,
'{': space, '}': space, '\'': space, '"': space, ';': space, ':': space,
'?': space, '<': space, '>': space, '№':space
}
                
var result = '';
var curent_sim = '';
                
for(i=0; i < text.length; i++) {
    // Если символ найден в массиве то меняем его
    if(transl[text[i]] != undefined) {
         if(curent_sim != transl[text[i]] || curent_sim != space){
             result += transl[text[i]];
             curent_sim = transl[text[i]];
                                                        }                                                                             
    }
    // Если нет, то оставляем так как есть
    else {
        result += text[i];
        curent_sim = text[i];
    }                              
}          
                
result = TrimStr(result);               
                
// Выводим результат 
$('#city').data('translit', result);
console.log($('#city').data('translit'));
}
function TrimStr(s) {
    s = s.replace(/^-/, '');
    return s.replace(/-$/, '');
}
// Выполняем транслитерацию при вводе текста в поле
$(function(){
    $('#city').on('input', function(){
         translit();
         return false;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="city" type="text" data-translit="" placeholder="Город">

1
  • Бррррррррррр...
    – Qwertiy
    8 авг 2017 в 15:16
0

Это ответ

var stocksData = [
        {
            "company_name": "Facebook",
            "code": "fb",
        },
        {
            "company_name": "Google",
            "code": "goog",
        },
        {
            "company_name": "Yahoo",
            "code": "yhoo",
        },
        {
            "company_name": "Apple",
            "code": "aapl",
        },
        {
            "company_name": "Royal Mail",
            "code": "rmg.l",
        },
     ];

var stocks = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('company_name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: stocksData
    });

    stocks.initialize();

    $('.typeahead').typeahead(
        null, {
        name: 'stocks',
        displayKey: 'company_name',
        source: stocks.ttAdapter()
    }).on('typeahead:selected', function(event, data){            
        $('#typeahead').val(data.code);        
    });

`

http://jsfiddle.net/7z9qA/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.