Bạn muốn display một modal dialog khi click vào một cụm từ, liên kết trên trang web. Model dialog, mà theo kiến thức hạn hẹp của nhiều người, có thể hiểu là một pop-up window, thường mang nghĩa lạm dụng, xấu vì cho rằng chỉ dùng để hiển thị những quảng cáo. Tuy nhiên, modal dialog được sử dụng khá thường xuyên trên những trang web có những nội dung mà bạn chỉ cần hiển thị một hộp thoại để giải thích thêm nội dung đó, xem như một chú thích mở rộng.

Có nhiều cách để thực hiện mục đích này, theo kiến thức hiện có của tôi nghĩ. Những front-end developing framework like Bootstrap (Bootstrap JS Modal Reference, example, Edit fiddle - JSFiddle), Foundation (Reveal Modal | Foundation Docs) đều hỗ trợ cách tạo một pop-up windows theo cách riêng nhưng nền tảng kĩ thuật đều dựa theo jquery-ui.

Cách mà tôi đã sử dung là dùng jquery-ui. Đọc thêm về jquery-ui ở đây: Dialog | jQuery UI

Example: loading a page into a modal dialog

Trong bài post này, tôi xin giới thiệu các công cụ có thể giúp cho công việc này đỡ vất vả.

Đây là một trong những tính năng autoComplete của jQuery jQuery autocomplete. Có thể sử dụng chức năng autocomplete của jQuery như ví dụ này utocomplete with PHP, MySQL and Jquery UI - David Carr | Web Developer, nhưng bạn cũng có thể dùng thư viện jQuery viết lại như cái link ban đầu. Thêm một vài ví dụ viết tương tự theo cách này sau đây:

Bạn có thể tham khảo ứng dụng mình đang viết ở đây: Model Search, chức năng autocomplete thể hiện trên các ô tìm kiếm của faceted search. Công nghệ bên dưới là jQuery, bản chất là search text/string và cách tìm kiếm dựa trên những selector được định nghĩa trước qua những css classes. Đi theo cách này có một số thư viện như:

Giới thiệu một chút về Select2: Select2 - The jQuery replacement for select boxes, có nhiều ví dụ cung cấp trên trang chủ, xem ở link này: Examples - Select2

Cũng trong dự án mình đang làm, những tính năng như tìm kiếm người dùng để thêm vào một nhóm, tìm kiếm collaborator để chia sẻ model... đều đang được cài đặt dựa trên backbone và underscore.

Nếu bạn đã từng sử dụng AngluarJS để phát triển web, filter cực kì hữu dụng để search thông tin.

Tham khảo:

http://jsfiddle.net/user/nvntung/fiddles/

curl -X GET --header 'Accept: application/json' 'http://localhost:8090/it4bus-ci302/index.php/search?_type=query&term=mysql&q=mysql'

Nếu kết quả ok, bạn có thể sử dụng url vào trong lời gọi ajax với jquery.