Как добавить кнопку поиска в автозаполнение JQuery

This это мой блог.Как добавить кнопку поиска в автозаполнение JQuery

Это код

<!doctype html> 
Jquery Auto Complete 

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> 

    <script> 
    $(document).ready(function() { 
    $("input#autocomplete").autocomplete({ 
    source: [ 
      { value: "NYC", url: 'http://www.nyc.com' }, 
      { value: "LA", url: 'http://www.la.com' }, 
      { value: "Philly", url: 'http://www.philly.com' }, 
      { value: "Chitown", url: 'http://www.chitown.com' }, 
      { value: "DC", url: 'http://www.washingtondc.com' }, 
      { value: "SF", url: 'http://www.sanfran.com' }, 
      { value: "Peru", url: 'http://www.peru.com' } 
     ], 
     select: function (event, ui) { 
      window.location = ui.item.url; 
     } 

}); 
    }); 
    </script> 



<input id="autocomplete" /> 


</!doctype>

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

источник

2016-06-27 Stackz

В выберите:. $ ("# Вход автозаполнения") атр ("Данные для URL ", ui.item.url); Затем получите доступ к URL-адресу автозаполнения при нажатии кнопки –

. Проверьте эту ссылку http://stackoverflow.com/questions/24154066/how-to-populate-data-in-autocomplete-textbox-when-a-button-is-clicked –

Полное обновление кода

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> 
</script> 

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

<script> 
var selectedItemUrl = ""; 
$(function() { 

    var source = [{ 
    value: "NYC", 
    url: 'http://www.nyc.com' 
    }, { 
    value: "LA", 
    url: 'http://www.la.com' 
    }, { 
    value: "Philly", 
    url: 'http://www.philly.com' 
    }, { 
    value: "Chitown", 
    url: 'http://www.chitown.com' 
    }, { 
    value: "DC", 
    url: 'http://www.washingtondc.com' 
    }, { 
    value: "SF", 
    url: 'http://www.sanfran.com' 
    }, { 
    value: "Peru", 
    url: 'http://www.peru.com' 
    }]; 

    $("#autocomplete").autocomplete({ 
    minLength: 0, 
    source: source, 
    select: function(event, ui) { 
     selectedItemUrl = ui.item.url 
    } 
    }) 

}); 

function SearchItem(e){ 
if(selectedItemUrl!="") 
    window.location=selectedItemUrl 
    else 
    alert("select something to search") 

} 


</script> 


</head> 
<body> 
<input id="autocomplete" /> 
<button onclick='SearchItem()'> 
Search 
</button> 

</body> 
</html>

Пожалуйста, отметьте, как ответ, если это помогает U Теперь: 0, :)

источник

2016-06-27 09:45:37 patilprashant6792

Пожалуйста, скажите, помогло ли оно вам. спасибо – patilprashant6792

жаль, что он не сработал – Stackz

Я обновил ответ, теперь вы можете проверить его работоспособность – patilprashant6792

Как добавить кнопку поиска в автозаполнение JQuery

ответ

Смежные вопросы