如何在搜索框外顯示網址？ （PHP，JS和HTML）

Question

如何獲取顯示在搜索框外部的URL鏈接？ 通常，搜索框會顯示結果，並打開一個新頁面，其中包含與該搜索結果相關的鏈接。

單擊搜索結果時，我不希望它打開另一個頁面，只需在搜索框下方（而不是在搜索結果內）顯示完整的URL（ https://www.php.net .. ）。 我不想看到目標頁面的內容，只能看到搜索框下方空格中的URL。 （示例在圖像中顯示了B部分）

我想我已經為JS正確修改了。

（由於PHP無法在代碼段上運行，因此我具有附加的php文件的下載鏈接。卡在php文件的第48行上） https://www.dropbox.com/s/kkg1s4riwjyhzne/search.php?dl=0

 $(document).ready(function() { // Icon Click Focus $('div.icon').click(function() { $('input#search').focus(); }); // Live Search // On Search Submit and Get Results function search() { var query_value = $('input#search').val(); $('b#search-string').text(query_value); if (query_value !== '') { $("#search-url").attr("href", "search.php?query=" + query_value); /* var query_value = $('input#search').val(); $('b#search-string').text(query_value); if(query_value !== ''){ $.ajax({ type: "POST", url: "search.php", data: { query: query_value }, cache: false, success: function(html){ $("ul#results").html(html); } }); */ } return false; } $("input#search").live("keyup", function(e) { // Set Timeout clearTimeout($.data(this, 'timer')); // Set Search String var search_string = $(this).val(); // Do Search if (search_string == '') { $("ul#results").fadeOut(); $('h4#results-text').fadeOut(); } else { $("ul#results").fadeIn(); $('h4#results-text').fadeIn(); $(this).data('timer', setTimeout(search, 100)); }; }); }); 

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; font-weight: normal; -webkit-font-smoothing: antialiased; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } a { outline: none; text-decoration: none; } /****************************************************************** Print Styles ******************************************************************/ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /****************************************************************** Text Selection Styles ******************************************************************/ /* Safari, Chrome, iPhones, iPads */ ::selection { background:#4096ee; color:#fff; } ::-moz-selection { background:#4096ee; color:#fff; } ::-webkit-selection { background:#4096ee; color:#fff; } /****************************************************************** General CSS ******************************************************************/ p { font-family: Verdana, Arial, sans-serif; line-height: 1.6em; color: #616161; font-size: 10px; } h1 { font-family: 'PT Sans', Verdana, Arial, sans-serif; font-weight: bold; line-height: 1.6em; color: #616161; text-decoration: none; font-size: 20px; } h2 { font-family: 'PT Sans', Verdana, Arial, sans-serif; line-height: 1.6em; color: #616161; text-decoration: none; font-size: 16px } h3 { font-family: 'PT Sans', Verdana, Arial, sans-serif; line-height: 1.6em; color: #616161; text-decoration: none; font-size: 14px; } h4 { font-family: 'PT Sans', Verdana, Arial, sans-serif; line-height: 1.6em; color: #616161; text-decoration: none; font-size: 12px; } h5 { font-family: 'PT Sans', Verdana, Arial, sans-serif; line-height: 1.6em; color: #ababab; text-decoration: none; font-size: 10px; } h6 { font-family: 'PT Sans', Verdana, Arial, sans-serif; line-height: 1.6em; color: #ababab; text-decoration: none; font-size: 8px; } /****************************************************************** Main CSS ******************************************************************/ div#main { width: 360px; margin: 200px auto 20px auto; } .title { line-height: 1.2em; position: relative; margin-left: 40px; } div.icon { margin-top: 4px; float: left; width: 31px; height: 30px; background-image: url(../images/magnify.gif); background-repeat: no-repeat; -webkit-transition-property: background-position, color; -webkit-transition-duration: .2s, .1s; -webkit-transition-timing-function: linear, linear; -moz-transition-property: background-position, color; -moz-transition-duration: .2s, .1s; -ms-transition-duration: .2s, .1s; -ms-transition-timing-property: linear, linear; -o-transition-property: background-position, color; -o-transition-duration: .2s, .1s; -o-transition-timing-property: linear, linear; transition-property: background-position, color; transition-duration: .2s, .1s; transition-timing-property: linear, linear; } div.icon:hover { background-position: 0px -30px; cursor: pointer; } input#search { width: 350px; height: 25px; padding: 5px; margin-top: 15px; margin-bottom: 15px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; outline: none; border: 1px solid #ababab; font-size: 20px; line-height: 25px; color: #ababab; } input#search:hover, input#search:focus { color: #3b3b3b; border: 1px solid #36a2d2; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); } h4#results-text { /*display: none;*/ font-family: 'PT Sans', Verdana, Arial, sans-serif; line-height: 1.6em; color: #000fff; text-decoration: none; font-size: 16px; } ul#results { display: none; width: 360px; margin-top: 4px; border: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; /*border-radius: 0px; -webkit-box-shadow: rgba(0, 0, 0, .15) 0 1px 3px; -moz-box-shadow: rgba(0,0,0,.15) 0 1px 3px; box-shadow: rgba(0, 0, 0, .15) 0 1px 3px;*/ } ul#results li { padding: 8px; cursor: pointer; border-top: 1px solid #cdcdcd; transition: background-color .3s ease-in-out; -moz-transition: background-color .3s ease-in-out; -webkit-transition: background-color .3s ease-in-out; } ul#results li:hover { background-color: #F7F7F7; } ul#results li:first-child { border-top: none; } ul#results li h3, ul#results li h4 { transition: color .3s ease-in-out; -moz-transition: color .3s ease-in-out; -webkit-transition: color .3s ease-in-out; color: #616161; line-height: 1.2em; } ul#results li:hover h3, ul#results li:hover h4 { color: #3b3b3b; font-weight: bold; } 

 <!DOCTYPE HTML> <html> <head> <!-- Meta --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Live Search Tutorial</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <!-- Load CSS --> <link href="style/style.css" rel="stylesheet" type="text/css" /> <!-- Load Fonts --> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:regular,bold" type="text/css" /> <!-- Load jQuery library --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <!-- Load custom js --> <!--<script type="text/javascript" src="custom.js"></script>--> </head> <body> <div id="main"> <!-- Main Title --> <div class="icon"></div> <h1 class="title">Live Search Tutorial</h1> <h5 class="title">(searches through php functions and shows them on php.net)</h5> <!-- Main Input --> <input type="text" id="search" autocomplete="off"> <!-- Show Results --> <!--<h4 id="results-text">Showing results for: <b id="search-string">Array</b> --> <a id="search-url" href="">View search results in another tab or window</a> </h4> <ul id="results"></ul> </div> </body> </html> 

Answer 1

據我了解，您有兩個問題

1. 您想在同一窗口中打開結果
2. 你想在外面展示結果

所以這是我的解決方案

對於第一個問題，只需轉到您的search.php文件並刪除target屬性

// Define Output HTML Formating
$html = '';
$html .= '<li class="result">';
$html .= '<a href="urlString">'; // remove target attribute from here
$html .= '<h3>nameString</h3>';
$html .= '<h4>functionString</h4>';
$html .= '</a>';
$html .= '</li>';

對於第二個問題，您可以在設計中創建自己，然后將其放入結果中

如果不需要ul以便可以自定義它，則還需要在serach.php中更改結果模板