autocomplete Clickable, như google

Question

Tôi đang tìm kiếm một autocomplete rằng không có nút "submit", nhưng điều đó khi nhấp chuột người dùng trên từ khóa autocomplete ông sẽ được chuyển hướng đến một URL khác, mà tôi sẽ chọn

i đang sử dụng http://dyve.net/jquery/?autocomplete và tôi muốn thực hiện trong kịch bản này, không sử dụng bất kỳ khác (vì nếu tôi gõ ODE trong vụ việc này, ông cho thấy CODE và cũng Odessa)

dụ:

người dùng gõ 'goo' sau đó xuất hiện GOOGLE cho anh ấy, khi anh ấy nhấp vào GOOGLE tập lệnh gửi anh ấy đến www.google.com (như "Google" => "http://www.google.com")

nó sẽ là tuyệt vời nếu tôi chỉ có thể làm với kịch bản tôi đã nói với các bạn Tôi không phải là lập trình viên nên tôi cần, bản thân mã, tôi biết quá nhiều để hỏi nhưng tôi đã thử mọi thứ = \

cảm ơn bạn!

---

vấn đề tại Jui autocomplete là tôi muốn làm điều này:

nếu tôi gõ "ODE"

nó sẽ hiển thị "C ODE" và cũng "ODE SSA "

không chỉ khi bắt đầu, đó là lý do tại sao tôi đang cố gắng sử dụng mã của bạn trong một số khác

cũng vậy, khi tôi sử dụng mã của Russ và karim79, nó không hoạt động

Answer 1

"nhưng ngay cả tác giả cũng không biết cách làm điều này" ??

Tôi nghĩ rằng nó có thể dễ dàng thực hiện bằng cách thay thế cảnh báo hộp thư (trong example page) bằng một cuộc gọi đến form.submit(). Tôi đã không thử nó, mặc dù.

Edit: Dưới đây là một số mã ví dụ sử dụng http://dyve.net/jquery/?autocomplete:

$("#mytextbox").autocomplete("form.php", {onItemSelect:submitTheForm}); 

function submitTheForm(){ 
    // redirect user to whatever URL 
} 

Answer 2

Dưới đây là một complete walkthrough on how to build an autocomplete search.

Về cơ bản, bạn cần phải có một event handler để gọi

window.location.href = "your-url-string.com"; 

khi nhấn Enter hoặc nhấp vào một vùng chọn.

EDIT:

Từ autocomplete documentation

Tìm kiếm Trang thay thế

Một plugin autocomplete có thể được sử dụng để tìm kiếm cho một nhiệm kỳ và chuyển hướng đến một trang liên quan một mục kết quả. Sau đây là một cách để đạt được chuyển hướng:

var data = [ {text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ]; 
$("...").autocomplete(data, { 
    formatItem: function(item) { 
    return item.text; 
    } 
}).result(function(event, item) { 
    location.href = item.url; // navigate to the chosen URL 
}); 

Answer 3

tôi thực hiện một cái gì đó như thế, tuy nhiên, thực hiện của tôi tận dụng jQuery UI Autocomplete.

Tôi sử dụng mẹo đơn giản, theo đó dữ liệu được trả về từ máy chủ là tập hợp các chuỗi được phân tách bằng ký tự dòng mới "\ n", trên mỗi dòng có một chuỗi có định dạng đề xuất :: url. Trên máy khách, tôi chỉ đơn giản là tách tại dấu phân cách (tôi sử dụng ::) và trích xuất đề xuất từ ​​phần bù đầu tiên của mảng kết quả và URL từ thứ hai. Ví dụ:

$("#search").autocomplete("/some/page", { 
     selectFirst: false, 
     formatItem: function(data, i, n, value) { 
      //make the suggestion look nice 
      return "<font color='#3399CC'>" + value.split("::")[0] + "</font>"; 
     }, 
     formatResult: function(data,value) { 
      //only show the suggestions and not the URLs in the list 
      return value.split("::")[0]; 
     } 
    }).result(function(event, data, formatted) { 
     //redirect to the URL in the string 
     var pieces = formatted.split("::"); 
     window.location.href = pieces[1]; 
    }); 

Để làm rõ ý tôi, giả sử bạn nhập 'goo'. Máy chủ có thể quay lại:

google::www.google.com\ngoodstuff::www.example.com 

Người dùng đó sẽ thấy danh sách xuất hiện với 'google' và 'goodstuff'. Nhấp vào một trong số đó sẽ thực hiện phương thức Tự động hoàn thành của result, nơi tôi chỉ cần lấy phần URL của chuỗi và chuyển hướng. Hy vọng rằng sẽ giúp.

Answer 4

plugin jQuery Autocomplete có tùy chọn matchContains sẽ tìm kiếm trong kết quả. Đặt nó thành true và nó cũng sẽ trả về các kết quả chuỗi con.

Answer 5

đoạn mã sau hoạt động tốt đối với tôi cho chuyển một hộp tìm kiếm với dữ liệu tại một nguồn dữ liệu từ xa (cơ sở dữ liệu MySQL) vào một lĩnh vực tìm kiếm và một redirector nếu người dùng chọn một trong những kết quả gợi ý:

$("#search").autocomplete("search.php", { 
    width: 260, 
    formatItem: function(data) { 
      return data[0]; 
      } 
     }).result(function(event, data) { 
    window.location.href = data[1]; 
}); 

lưu ý: tôi đã làm cho dữ liệu ajax tách ra thành hai phần:

1. các thuật ngữ tìm kiếm
2. URL liên quan đến cụm rằng

ví dụ:

Brad Pitt |/diễn viên/bradpitt

Matt Damon |/diễn viên/Matt Damon

jQuery autocomplete tự động tách các dữ liệu ở các đường ống (|) và mỗi dòng mới

Answer 6

ví dụ đơn giản nhất bạn có thể tìm thấy tại JSFiddle

var data = [ 
    { 
     value: 'Google', 
     url: 'http://www.google.com' 
    }, 
    { 
     value: 'StackOverflow', 
     url: 'http://www.stackoverflow.com' 
    } 
]; 

$("input").autocomplete({ 
    source: data, 
    select: function(event, ui) { 
     window.location = ui.item.url; 
    } 
});