Crimsons

При нажатии клавиши в текстовом поле нужно отправлять ajax запрос к бд и подгружать данные оттуда. После получения вывести в виде списка подсказок, на которые можно нажать, что бы данные перенеслись в поле. Так же предусмотреть отмену обработки предыдущего запроса, если была нажата следующая клавиша и был отправлен новый запрос с новыми данными. Это нужно для того, что бы пользователь, введя "Укр" не получил в подсказки "Уругвай, Уганда, Уклин" и т.д. Такое может произойти, если запрос отправляется и обрабатывается дольше, чем пользователь нажимает следующую клавишу.

Попробуйте вместо массивов в js хранить данные непосредственно в html с помощью атрибута "data-". В моем случае data-value. А дальше просто при клике на кнопку выбрать все выбранные радиокнопки и просто пройтись по этому атрибуту суммируя его значение.
Вот пример кода

<h4>Your test</h4>
<h3>Try yourself</h3>
<div class="question">
  <p>Do you have..</p>
  <input type="radio" name="r1" id="Answer" data-value='1'><label>Home</label>
  <input type="radio" name="r1" id="Answer" data-value='2'><label>Sity</label>
  <input type="radio" name="r1" id="Answer" data-value='3'><label>Advanture</label>
</div>

<div class="question">
  <p>Do you have..</p>
  <input type="radio" name="r2" id="Answer" data-value='4'><label>Home</label>
  <input type="radio" name="r2" id="Answer" data-value='5'><label>Sity</label>
  <input type="radio" name="r2" id="Answer" data-value='6'><label>Advanture</label>
</div>

<div class="question">
  <p>Do you have..</p>
  <input type="radio" name="r3" id="Answer" data-value='7'><label>Home</label>
  <input type="radio" name="r3" id="Answer" data-value='8'><label>Sity</label>
  <input type="radio" name="r3" id="Answer" data-value='9'><label>Advanture</label>
</div>

<div class="question">
  <p>Do you have..</p>
  <input type="radio" name="r4" id="Answer" data-value='10'><label>Home</label>
  <input type="radio" name="r4" id="Answer" data-value='11'><label>Sity</label>
  <input type="radio" name="r4" id="Answer" data-value='12'><label>Advanture</label>
</div>
<button id="btnResutl">Result</button>
<div id="resultFild"></div>

Значения подставите те, которые вам нужны.

А вот код JS

var btnResutl = document.getElementById('btnResutl');
var resultFild = document.getElementById('resultFild');
var inputFild = document.getElementsByTagName('input');
btnResutl.addEventListener('click', function(){
    let resultedInputs = document.querySelectorAll("input[type='radio']:checked");
    let result = 0;
    Array.prototype.map.call(resultedInputs, (el)=>{
      result += parseInt(el.dataset.value);
    });
    console.log(result);
    resultFild.innerHTML = result + ' баллов'
});

Всё дело в том, что вы используете событие клика на кнопку вместо того, что бы делать проверку поля при событии отправки формы. Вам следует при событии submit проверять поле на пустоту и в результате проверки либо отменять событие с помощь preventDefault() и переводить фокус на поле, либо же ничего ничего не делать и форм просто отправится. У вас при клике на кнопку на форму навешивается событие с помощь addEventListener, которое не исчезает, даже если поле заполнить и нажать снова на отправку формы.

Попробуйте следующий код

let form = document.getElementById("search_mobile");
let form_search_field = document.getElementById('search_field_mobile');
let form_search_submit = document.getElementById('search_submit_mobile');

form.noValidate = true;
/*
** При отправке формы проверяем содержание нужного поля 
** и если оно пустое, тогда отменяем отправку и ставим фокус на поле
*/
form.addEventListener('submit', function(e){
  if( form_search_field.value == "" ) {
    e.preventDefault();
    form_search_field.focus();
  }
}, false);

  form_search_field.onblur = function(e) {
    if (e.relatedTarget !== form_search_submit) {
      form_search_field.value = "";
    }
  }

str.replace(/.+\/(.+)\.html$/,'$1');
Возвращает то, что нужно. Проверил на паре примеров, так что если есть исключения, мне о них не известно.

//Создаем объект запроса
let xhr = new XMLHttpRequest();
//Вызываем его метод open, где указываем метод запроса(POST, так как мы будем отправлять данные. Хотя эксперты могут поправить меня) и url сервера, куда будем отправлять
xhr.open('POST', url);
//Регистрируем обработчик события, который будет вызван при окончании ( и не только ) получения данных обратно от сервера
xhr.addEventListener('readystatechange', function() {
   //Проверим состояние запроса, нас интересует случай когда он завершен ( DONE )
   if (xhr.readyState === 4) {
      //Дальше проверим какой код ответа нам выдал сервер
      if (xhr.status === 200) {
        //Если попали сюда, значит можно выполнить функцию, которую вам нужно
       callback();
      }
   }
}, false);
//Установим заголовок запроса, где явно укажем тип данных, который будем передавать. В нашем случае это будет объект в формате JSON
xhr.setRequestHeaders('Content-Type', 'application/json');
//Отправим запрос, передав в тело запроса наш сериализованый в формат JSON наш объект
xhr.send(JSON.stringify(obj));

Прошу простить за возможные опечатки.
На сервере же вам понадобится преобразовать JSON обратно в объект.