jQuery Auto-Suggestion in Formular übernehmen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

12:19, 4.5.2013

Hallo

ich versuche für ein Such-Formular die (Google-) Auto-Suggestion zu verwenden,
bekomme auch Ergebnisse, aber schaffe es nicht ein Ergebnis zu übernehmen

Die Auto-Suggestion Ergebnisse werden dynamisch in einer ul / li Liste ausgegeben

bei einem Test, den Inhalt eines <li> Elements per jQuery click Funktion in Variable zu holen
... da klappt es 1A

Aber bei mit <li> Elemente aus Auto-Suggestion klappt es nicht ?!? .... ???

hier ist mein Code:

Datei: index.php

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

<?php
// ---------------------------------------------------- 
 
header('Content-type: text/html; charset=utf-8'); 
 
if (!empty($_REQUEST['q'])) { 
$go_query = trim($_REQUEST['q']); 
}
else { 
$go_query = ''; 
}
 
// ---------------------------------------------------- 
?>
<html>
<head>
<title>Suggestions</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 
<script type="text/javascript">
$('document').ready(function() { 
 
    text_prompt = 'Suche eingeben';
     
    // Add initial text to textbox
    if($('#tx').val() == '')
    {
        $('#tx').val(text_prompt)
    }
 
    // When clicked remove text
    $('#tx').click(function(){
        if($('#tx').val() == '' || $('#tx').val() == text_prompt)
        {
            $('#tx').val('')
        }
    })
     
    // When text input loses focus
    $('#tx').blur(function(){
        if($('#tx').val() == '')
        {
            $('#tx').val(text_prompt)
        } 
    })
     
     
    $('#tx').keyup(function()
    {    
        $('#search_dd').html(get_json($('#tx').val()));                 
    })
     
    function get_json(text)
    {
        // To avoid sending an empty query
        if(text != '')
        {
            $('#search_dd').slideDown('fast', function(){
                var query = encodeURI(text);
                var misec = new Date().getTime(); 
                url = 'suggestions1.php?q='  + query + "&m=" + misec + "";
         
                $.get(url, function(data) {
                    $('#search_dd').html(data)
                });
            })
     
        }
        else
        {
            $('#search_dd').slideUp('fast', function(){
                $('#search_dd').html('');
            })
        }
    }
     
    function hi_mal(text)
    {
        $('#mal').html(text)
    }
     
     
     
    $("#test li").click(function() { 
        var testtxt = $(this).text(); 
        // alert("Auswahl: "+ testtxt);
        $('#mal').empty().text(testtxt); 
        $('#tx').val(testtxt); 
    });
     
     
    $("#sug li").click(function() { 
        var sugtxt = $(this).text(); 
        // alert("Auswahl: "+ sugtxt);
        $('#mal').empty().text(sugtxt); 
        $('#tx').val(sugtxt); 
    });
     
 
});
</script>
 
 
<style type="text/css">
 
body {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    background:#FFFFFF; 
    color:#000000; 
}
 
div#search_dd { 
    background: #FFF;
    border: 1px solid gray;
    display: none;
    margin:8px; 
    width: 500px;
    height: 260px;
    overflow-y: scroll;
}
 
label { 
    margin: 4px 4px 8px 12px; 
    padding: 2px; 
    font-size: 12px;
    font-style: italic;
}
 
#mal { 
    background: purple;
    color: yellow;
    margin:8px; 
    width: 500px;
    height: 36px;
    text-align: center;
}
 
form { 
    width: 520px;
    margin: 20px auto; 
    padding: 6px; 
    font-size:14px; 
    background:#DEDEDE; 
}
 
input#tx { 
    width: 210px;
    font-size:16px; 
}
 
#search_dd ul { 
    list-style-type: none;
    list-style: none;
    margin: 0; 
    padding: 0;
}
 
#search_dd ul#sug li { 
    list-style: none;
    padding: 2px 2px 2px 10px;
}
 
.bgdark { 
    background: #EEEEEE;
}
 
.bglight { 
    background: #FFFFFF;
}
 
 
</style>
 
</head>
<body>
 
<br />
<br />
<br />
 
<form>
    <label>Bitte Suche eingeben:</label>
    <input id="tx" name="q" value="<?php echo $go_query; ?>" />
    &nbsp;&nbsp;&nbsp; OK: <input type="submit" name="go" value="SUCHEN">
    <div id="search_dd"></div>
    <div id="mal">&nbsp;</div>
</form>
 
<br />
<br />
 
<?php
// --------------------------------- 
if (!empty($go_query)) { 
echo "<h2>Suche: ".$go_query."</h2>\n"; 
}
else { 
echo "<p>Bitte zuerst Suchwort(e) eingeben</p>\n"; 
}
 
// --------------------------------- 
?>
 
<br />
<br />
 
 
<p>Test Liste</p>
 
<ul id="test">
 <li>Eins</li>
 <li>Zwei</li>
 <li>Drei</li>
 <li>Vier</li>
</ul>
 
<br />
<br />
<br />
 
</body>
</html>

Datei: suggestions1.php

<?php 
// ---------------------------------------------------------- 
 
header('Content-type: text/html; charset=utf-8'); 
 
// ---------------------------------------------------------- 
 
class Suggestions { 
     
    public static function return_list($query) { 
         
        $lang = 'de';
         
        $url = 'http://suggestqueries.google.com/complete/search?output=firefox&client=firefox&hl=' . $lang . '&q=' . urlencode($query);
         
        $ch = curl_init($url); 
        curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10); 
        curl_setopt($ch, CURLOPT_TIMEOUT, 10); 
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 
        curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:20.0) Gecko/20100101 Firefox/20.0"); 
        $data = curl_exec($ch); 
        curl_close($ch); 
         
        $suggestions = json_decode($data, true); 
         
        echo "\n"; 
        echo "\t".'<ul id="sug">'."\n"; 
         
        foreach ($suggestions[1] as $index => $s) { 
            if ($index % 2) { $cssclass = 'bgdark'; } else { $cssclass = 'bglight'; } 
            echo "\t\t".'<li class="'.$cssclass.'">' . $s . '</li>'."\n"; 
        } 
         
        echo "\t".'</ul>'."\n"; 
    } 
 
}
 
 
// ---------------------------------------------------------- 
 
 
$query_str = $_GET['q'];
 
echo Suggestions::return_list($query_str);
 
 
// ---------------------------------------------------------- 
?>

bei Klick auf <li> Elemente von

<ul id="test">

klappt es

aber bei Klick auf <li> Elemente von

<ul id="sug">

klappt es nicht ... ?!? ... ???

Wie bekomme ich es hin, das es mit diesen "dynamisch" erstellten <li> Elementen funktioniert ??

Wenn man auf ein <li> Element aus der <ul id="sug"> Liste klickt,
dann soll der vorgeschlagene Suchbegriff in das Formular <input> Feld übernommen werden.

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
~~h**s~~

20:46, 4.5.2013
hi,

ich nehme mal stark an das es an dem eventhandler "click" liegt.

um die events auch für nachträglich hinzugefügte inhalte nutzbar zu machen solltest du die dafür vorgesehenen jquery eventhandler nehmen, siehe "live" oder "bind"... oder aber auch "on" für die neueren jquery versionen...

Beitrag zuletzt geändert: 4.5.2013 20:46:35 von hcms
Autor dieses Themas
suchweb

suchweb hat kostenlosen Webspace.

10:33, 5.5.2013
hmm,
ich bekomme es nicht hin, weder mit .live oder .bind oder .on

habe jetzt (nach der document.ready Funktion) eingefügt:

?
1
2
3
4
5
function use_sug (sugtxt) {
        // alert("Auswahl: "+ sugtxt);
        $('#mal').empty().text(sugtxt);
        $('#tx').val(sugtxt);
}

und in der suggestions1.php bei <li> Element ein onClick eingefügt

?
1
echo "\t\t".'<li class="'.$cssclass.'" onClick="use_sug(\''.$s.'\')">' . $s . '</li>'."\n";

damit geht es, aber blöd, wenn man (ich) in einem von jQuery erzeugtem Element
keinen Click-Handler / Event mit jQuery hin bekommt, sondern das "alte" onClick nehmen muss

.... habe echt viel mit it .live oder .bind oder .on ausprobiert, aber nicht zum Laufen bekommen
:(
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city